@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap');


/* リセット
========================= */
html{height:100%;}
body {
	height:100%;
	margin: 0;
	padding: 0;
    font-size: 15px;
}
div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, blockquote, pre, table, caption, th, td, address, form, fieldset, legend, object, header, footer, section, article, nav, figure, canvas {
  margin: 0;
  padding: 0;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
fieldset, img {
  border: none;
  vertical-align: top;
}
address, caption, cite, code, dfn, em, strong, th, var {
  font-weight: normal;
  font-style: normal;
}
ol, ul, li {list-style: none; }
caption, th, td {
  vertical-align: top;
  text-align: left;
}
h1, h2, h3, h4, h5, h6, small {
  font-weight: normal;
  font-size: 100%;
}
i {font-style: normal; }
q:before, q:after {content: '';}
abbr, acronym {border: none; }
a, object, embed {
  outline: none;
  text-decoration:none;
}
a:hover, a:active, a:focus {
    outline: none;
    text-decoration:none;
}
header, footer, section, article, nav, figure, canvas, main {display: block;}
* {box-sizing: border-box;}


/* 汎用
========================= */
.pcBr{display:inline;}
.spBr{display:none;}
.fleft{
	float:left;}
.fright{
	float:right;}
.clearfix:after {
    content:" ";
    display:block;
    clear:both;}
.tategumi{
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;}


/* 大枠
========================= */
html {
  font-weight: 400;
  font-style: normal;
  background-color: #fff;
  color: #111;
  font-family: 'Roboto', 'Noto Sans Japanese',sans-serif;}
body{
    margin:0 auto;
	position:relative;}


/* ローディング
========================= */
#pageloading-wrap {
   background: #000000;
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   text-align: center;
   display: table;
   z-index: 4;}
#pageloading-icon {
   display: table-cell;
   vertical-align: middle;
}
.ball-scale-ripple>div{
    border: 2px solid #fa9900 !important;
    margin: 0 auto;
}



/* 動画
========================= */
#videoBox{
    width: 100%;
    height: 100vh;
    position: relative;
    background-color: rgba(0,0,0,0.4);
    background-size: cover;}
#videoBox #titleBox{
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
    text-align: center;
    color: #fff;}
#videoBox #titleBox h1{
    font-weight: 800;
    font-size: 60px;}
#videoBox #titleBox p{
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.1em;}
#videoBox video{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    /*filter: grayscale(100%) sepia(30%) brightness(110%) contrast(110%) ;
  -webkit-filter: grayscale(100%) sepia(30%) brightness(110%) contrast(110%) ;
  -moz-filter: grayscale(100%) sepia(30%) brightness(110%) contrast(110%) ;
  -o-filter: grayscale(100%) sepia(30%) brightness(110%) contrast(110%) ;
  -ms-filter: grayscale(100%) sepia(30%) brightness(110%) contrast(110%) ;*/
}


/* FIXメニュー
========================= */
header{
    position: fixed;
    top: 0;
    z-index: 2;
	width:100%;
    height: 100vh;
}
header #headerWrap{
    width: 100%;
	max-width:1600px;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 1.2s ease-out;
}
header #headerWrap.navdisplay{opacity: 1.0;}


	header div.fleft{
		padding:50px 0 0 0;
		width:15%;
		padding-left:calc(15% - 91px);}
        
		header div.fleft h1 img {width:91px;}
		header div.fleft p {
			font-size:0.85rem;
			font-weight:500;
			letter-spacing:0.35em;
            line-height: 2.0;
            margin: 30px auto 0;}            
        header div.fleft p.tategumi{
            -webkit-writing-mode: vertical-rl;
            -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;}            
	
    header div.fright{
		width:15%;
        padding: 50px 0 0 0;
    }
		header div.fright p {
			display:inline-block;
            margin-right: 20px;
			line-height:1.4;
			letter-spacing:0.1em;
			font-weight:700;}
        header div.fright p:nth-child(2){
            margin: 0 0 50px 0;
        }
                header div.fright p a{
                    font-weight: 700;
                    font-size: 16px;
                    color: #111111;
                    position: relative;
                    padding: 0 5px;
                }
                header div.fright p a::after{
                    content: "";
                    width: 100%;
                    height: 6px;
                    background-color: #ff9f09;
                    position: absolute;
                    z-index: -1;
                    top: calc(50% - 3px);
                    left: 0;
                    transition: width .1s ease-out;
                }
                header div.fright p a:hover::after{
                    width: 0;
                }
                
        header div.fright ul {}
        header div.fright ul li { margin-bottom: 18px;}
        header div.fright ul li a {
            letter-spacing: 0.65em;
            font-size: 14px;
            font-weight: 700;
            color: #111111;
            transition: color .2s ease-out;
        }
        
        @media screen and (max-width: 1200px) {
            header div.fright ul li a {letter-spacing: 0.5em;}
        }
        @media screen and (max-width: 960px) {
            header div.fright ul li a {letter-spacing: 0.4em;}
        }
        @media screen and (max-width: 900px) {
            header div.fright ul li a {letter-spacing: 0.2em;}
        }

        
        header div.fright ul li a:hover,
        header div.fright ul li a.active{
            color: #fa9900;
        }

/* 時計
========================= */
#clock-02{
    position: fixed;
    z-index: 3;
    left: 0;
    bottom: 50px;
    color: #ffffff;
    font-size: 13px;
    padding: 4px 10px 4px 12px;
    letter-spacing: 0.15em;
    background-color: #fa9900;
}


/* 写真
========================= */
main{
    width: 100%;
    /*margin-top: 6px;*/
    padding: 200px 20% 30px 20%;
    box-sizing: border-box;
    background-color: #ffffff;
    position: relative;
}
/*main::after{
    content: "";
    width: 100%;
    height: 6px;
    position: absolute;
    top: -6px;
    left: 0;
    background: url(../img/common/img_wave.png) repeat-x center top;
    background-color: rgba(0,0,0,0.5);
}*/
main ul{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}
main ul li img{
    width: 100%;
    height: 100%;
    display: block;
    margin-bottom: 15px;    
}
main ul li p{
    font-size: 13.5px;
    letter-spacing: 0.08em;
    line-height: 1.8;
}
main ul li p:nth-of-type(1){
    margin-bottom: 2px;
    font-weight: bold;
}
main ul li p:nth-of-type(2){
    margin-bottom: 150px;
    color: #000000;
}
main ul li p a{
    color: #fa9900;
    text-decoration: underline;
}


/* footer
========================= */
footer  { }
	footer .copyright {
		position:fixed;
		right:10px;
		bottom:10px;
		letter-spacing:0.05em;
		color:#888888;
        opacity: 0.4;
		font-size:0.7rem;
		font-weight:400;}








@media screen and (max-width: 768px) {

/* SP_リセット
========================= */
body {
	height:100%;
	margin: 0;
	padding: 0;
    font-size: 15px;
}


/* SP_汎用
========================= */
.pcBr{display:none;}
.spBr{display:inline;}
.fleft{
	float:none;}
.fright{
	float:none;}


/* SP_大枠
========================= */
/*html {
  font-weight: 400;
  font-style: normal;
  background-color: #fff;
  color: #111;
  font-family: 'Roboto', 'Noto Sans Japanese',sans-serif;}
body{
    margin:0 auto;
	position:relative;}*/


/* SP_動画
========================= */
#videoBox{
    width: 100%;
    height: 100vh;
    background-size:inherit;
    /*position: relative;
    background-color: rgba(0,0,0,0.5);*/}
#videoBox #titleBox{
    top: 45%;
    /*position: absolute;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
    text-align: center;
    color: #fff;*/}
#videoBox #titleBox h1{width: 80px;}
#videoBox #titleBox h1 img{width: 100%;}
#videoBox p{
    color: #fff;
    position: absolute;
    right: 5%;
    top: 3%;
    font-size: 12.5px;
    line-height: 1.8;
    letter-spacing: 0.35em;
}
#videoBox video{
    height: 100vh;
    object-fit: cover;
    /*position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;*/
}


/* FIXメニュー
========================= */
header{
    height: auto;
    /*position: fixed;
    top: 0;
    z-index: 2;
	width:100%;*/
}
header #headerWrap{
    height: 55px;
	max-width:inherit;
    background-color: #fff;
    border-bottom: 1px solid #e3e3e3; 
    /*width: 100%;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 1.2s ease-out;*/
}
header #headerWrap.navdisplay{opacity: 1.0;}

	header div.fleft{
		padding:14px 0 0 0;
		width:90%;
        height: 55px;
		padding-left: 5%;}
		header div.fleft h1 img {width:108px;}
		header div.fleft p {display: none;}            
        /*header div.fleft p.tategumi{
            -webkit-writing-mode: vertical-rl;
            -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;}*/
	
    header div.fright{
		width:100%;
        padding: 0;
    }
        header div.fright #spMenu,
        header div.fright #spMenu span{
            display: inline-block;
            transition: all .3s;
            box-sizing: border-box;
        }
        header div.fright #spMenu{
            top: 17px;
            right: 5%;
            height: 22px;
            width: 30px;
            position: absolute;
            /*cursor: pointer;*/
        }
        header div.fright #spMenu span{
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: #000;
        }
        header div.fright #spMenu span:nth-of-type(1){top: 0;}
        header div.fright #spMenu span:nth-of-type(2){top: 10px;}
        header div.fright #spMenu span:nth-of-type(3){top: 20px;}
        
        
        header div.fright.active #spMenu span:nth-of-type(1) {
          -webkit-transform: translateY(10px) rotate(-45deg);
          transform: translateY(10px) rotate(-45deg);
        }
        header div.fright.active #spMenu span:nth-of-type(2) {
          left: 50%;
          opacity: 0;
          -webkit-animation: active-menu-bar02 .8s forwards;
          animation: active-menu-bar02 .8s forwards;
        }
        @-webkit-keyframes active-menu-bar02 {
          100% {
            height: 0;
          }
        }
        @keyframes active-menu-bar02 {
          100% {
            height: 0;
          }
        }
        header div.fright.active #spMenu span:nth-of-type(3) {
          -webkit-transform: translateY(-10px) rotate(45deg);
          transform: translateY(-10px) rotate(45deg);
        }
    
        header div.fright nav{
            height: 0;
            width: 100%;
            overflow: hidden;
            text-align: center;
            transition: all .25s ease-out;
            background-color: rgba(255,255,255,0.92);
        }
        header div.fright.active nav{
            height: 100vh;
            padding: 0 5%;
        }
		header div.fright p {
			display:block;
            margin: 40px 0 20px 0;
			/*line-height:1.4;
			letter-spacing:0.1em;
			font-weight:700;*/}
        header div.fright p:nth-child(2){
            margin: 0 0 35px 0;
        }
                header div.fright p a{
                    z-index: 3;
                    font-size: 18px;
                    /*font-family: 'Roboto Condensed', sans-serif;
                    font-weight: 700;
                    color: #111111;
                    position: relative;
                    padding: 0 5px;*/
                }
                header div.fright p a::after{
                    z-index: -1;
                    /*content: "";
                    width: 100%;
                    height: 6px;
                    background-color: #ff9f09;
                    position: absolute;
                    top: calc(50% - 3px);
                    left: 0;
                    transition: width .1s ease-out;*/
                }
                header div.fright p a:hover::after{
                    width: 0;
                }
                
        header div.fright ul {}
        header div.fright ul li { margin-bottom: 26px;}
        header div.fright ul li a {
            letter-spacing: 0.5em;
            font-size: 15px;
            /*font-weight: 700;
            color: #111111;
            transition: color .2s ease-out;*/
        }
        header div.fright ul li a:hover,
        header div.fright ul li a.active{
            color: #fa9900;
        }

/* 時計
========================= */
#clock-02{
    bottom: 0px;
    /*font-family: 'Roboto Condensed', sans-serif;
    position: absolute;
    left: 0;
    color: #ffffff;
    font-size: 13px;
    padding: 4px 10px 4px 12px;
    letter-spacing: 0.15em;
    background-color: #fa9900;*/
}


/* 写真
========================= */
main{
    padding: 130px 5% 30px 5%;
    /*margin-top: 6px;*/
    /*width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    position: relative;*/
}
/*main::after{
    content: "";
    width: 100%;
    height: 6px;
    position: absolute;
    top: -6px;
    left: 0;
    background: url(../img/common/img_wave.png) repeat-x center top;
    background-color: rgba(0,0,0,0.5);
}*/
main ul{
    z-index: 1;
    max-width: inherit;
    /*width: 100%;
    margin: 0 auto;
    position: relative;*/
}
main ul li img{
    margin-bottom: 8px;    
    /*width: 100%;
    height: 100%;
    display: block;*/
}
main ul li p{
    font-size: 12.5px;
    letter-spacing: 0.05em;
    line-height: 1.6;
}
main ul li p:nth-of-type(1){
    margin-bottom: 0px;
    /*font-weight: bold;*/
}
main ul li p:nth-of-type(2){
    margin-bottom: 40px;
    /*color: #000000;*/
}
main ul li p a{
    color: #fa9900;
    text-decoration: underline;
}


/* footer
========================= */
footer  { }
	footer .copyright {
		position:fixed;
		z-index:1;
		right:5px;
		bottom:5px;
		letter-spacing:0.05em;
		color:#888;
        opacity: 0.3;
		font-size:0.5rem;
		font-weight:400;}