@charset "UTF-8";

/* ------------------------------------------- CSS Information 
 Style Info: ブラウザスタイルのリセット設定
----------------------------------------------------------- */  
html{overflow-y:scroll;} 
body,div,blockquote,pre,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,table,th,td,form,input,textarea,fieldset{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
table{border-collapse:collapse;border-spacing:0;}
caption, th{text-align:left;}   
img,abbr,acronym,fieldset{border:none;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
hr,legend{display:none;}
object,embed{vertical-align:top;} 

/* ------------------------------------------- CSS Information 
 Style Info: 基本設定
----------------------------------------------------------- */
/*A Style*/  
a:link{text-decoration:underline;color:#ffec47;}
a:visited{text-decoration:none;color:#ffec47;}
a:hover{text-decoration:underline;color:#ffec47;}
a:active{text-decoration:none;color:#ffec47;}
.b{font-weight:bold;}
.ul{text-decoration:underline;}
.bg{background-color:#fff45c;}
.red{color:#cc9900;}
.big{font-size:20px;line-height:30px;}
.small{font-size:12px;line-height:18px;}
@media only screen and (max-width:959px){.big{font-size:16px;line-height:24px;}}
/*img*/
.pc{display:block;margin:0 auto;}
.sp{display:none;margin:0 auto;}
@media only screen and (max-width:959px){
.pc{display:none;}
.sp{display:block;}
}
/* text */
.text{margin:0;padding:0;font-size:16px;line-height:30px;text-align:left;}
.text p,.text ul,.text dl{margin:0;padding:0 0 30px 0;}
.text p:last-child{margin:0;padding:0;}
.text li{list-style:none;}
.text_right{text-align:right;}
.text_center{text-align:center;}
@media only screen and (max-width:959px){
.text{font-size:14px;line-height:24px;text-align:justify;}
.text p,.text ul{margin:0;padding:0 0 20px 0;}
}
/*br*/
.br_sp{display:none;}
@media only screen and (max-width:768px){
.br_sp{display:block !important;}
}
span.pc_only{display:inline;}
span.sp_only{display:none;}
@media only screen and (max-width:768px){
span.pc_only{display:none;}
span.sp_only{display:inline;}
}


/* ------------------------------------------- CSS Information 
 Style Info: html/body
----------------------------------------------------------- */
html,body{  
font-family:"メイリオ",Osaka,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",Arial,Sans-Serif;
color:#333333;
font-size:16px;
line-height:0;
text-align:center;
letter-spacing:0em;
background:#f7f6e7;
width:100%;
height:100%;
}

/* ------------------------------------------- CSS Information 
 Style Info: LOADING
----------------------------------------------------------- */
#loading{
margin:0;
padding:0;
width:100%;
height:100%;
box-sizing:border-box;
text-align:center;
position:relative;
overflow:hidden;
background:#f0f1ec;
}
/* header01 -----*/
#header01{
position:absolute;
margin:0;
padding:0;
width:100%;
height:100%;
top:0;
left:0;
line-height:0;
background:#f7f6e7;
}
.header01_text{
width:430px;
height:350px;
margin:auto;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
opacity:0;
animation:header01_text 1s both;
background-repeat:no-repeat;
background-position:left top;
z-index:100;
}
.header01_text.src1{background-image:url(../img/header_text01_pc.png);animation-delay:1s;}
.header01_text.src2{background-image:url(../img/header_text02_pc.png);animation-delay:2s;}
.header01_text.src3{background-image:url(../img/header_text03_pc.png);animation-delay:4s;}
.header01_text.src4{background-image:url(../img/header_text04_pc.png);animation-delay:5s;}
@keyframes header01_text{0%{opacity:0;}100%{opacity:1;}}
#contents{width:100%;height:100%;}
@media only screen and (max-width:750px){
#loading{}
/* header01 -----*/
#header01{}
.header01_text{
width:100%;
height:100%;
background-position:center;
background-size:100% auto;
}
.header01_text.src1{background-image:url(../img/header_text01_sp.png);}
.header01_text.src2{background-image:url(../img/header_text02_sp.png);}
.header01_text.src3{background-image:url(../img/header_text03_sp.png);}
.header01_text.src4{background-image:url(../img/header_text04_sp.png);}
}

/* ------------------------------------------- CSS Information 
 Style Info: HEADER
----------------------------------------------------------- */
header{
margin:0;
padding:0;
width:100%;
height:100%;
box-sizing:border-box;
text-align:center;
position:relative;
overflow:hidden;
background:#f0f1ec;
}
/* header02 -----*/
#header02{
position:absolute;
margin:0;
padding:0;
width:100%;
height:100%;
top:0;
left:0;
line-height:0;
z-index:100;
}
#header02 img{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
width:100%;
max-width:750px;
z-index:100;
}
#header02 img.scroll{
position:absolute;
top:auto;
bottom:40px;
left:0;
right:0;
margin:auto auto 0 auto;
width:80px;
height:80px;
-webkit-animation:scroll 1.5s infinite linear alternate;
animation:scroll 1.5s infinite linear alternate;
}
@-webkit-keyframes scroll{
0% {-webkit-transform:translate(0, 0) rotate(0deg);}
50% {-webkit-transform:translate(0, -10px) rotate(0deg);}
100% {-webkit-transform:translate(0, 0)rotate(0deg);}?
}
@keyframes scroll{
0% {transform:translate(0, 0) rotate(0deg);}
50% {transform:translate(0, -10px) rotate(0deg);}
100% {transform:translate(0, 0)rotate(0deg);}?
}
.header02_bg{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
opacity:0;
animation:header02_bg 20s infinite;/* 4画像 × 各5s = 20s */
background-position:center;
background-size:cover;
}
.header02_bg.src1{background-image:url(../img/header_bg01_pc.png);animation-delay:0s;}
.header02_bg.src2{background-image:url(../img/header_bg02_pc.png);animation-delay:5s;}
.header02_bg.src3{background-image:url(../img/header_bg03_pc.png);animation-delay:10s;}
.header02_bg.src4{background-image:url(../img/header_bg04_pc.png);animation-delay:15s;}
@keyframes header02_bg{
0%{opacity:1;transform: scale(1.5,1.5);z-index:9;}
30%{opacity:1;z-index:10;}
31%{opacity:0;}
100%{opacity:0;transform:scale(1,1);}
}
@media only screen and (max-width:750px){
header{}
/* header02 -----*/
#header02{}
#header02 img{}
#header02 img.scroll{bottom:20px;width:60px;height:60px;}
.header02_bg.src1{background-image:url(../img/header_bg01_sp.png);}
.header02_bg.src2{background-image:url(../img/header_bg02_sp.png);}
.header02_bg.src3{background-image:url(../img/header_bg03_sp.png);}
.header02_bg.src4{background-image:url(../img/header_bg04_sp.png);}
}


/* ------------------------------------------- CSS Information 
 Style Info: ABOUT
----------------------------------------------------------- */
#about{
width:100%;
margin:0;
padding:120px 0 120px 0;
position:relative;
box-sizing:border-box;
display:flex;
flex-direction:row;
justify-content:center;
align-items:stretch;
background:#f0f1ec;
}
#about .leftbox{
width:44%;
box-sizing:border-box;
margin:auto auto auto 0;
padding:0;
border-bottom:1px solid #cc9900;
}
#about .leftbox img{
width:300px;
height:30px;
padding:0 0 20px 0;
}
#about .rightbox{
width:56%;
margin:0;
padding:0 20px;
box-sizing:border-box;
}
#about .textbox{
width:380px;
margin:0 auto;
padding:0;
text-align:justify;
box-sizing:border-box;
}
@media only screen and (max-width:750px){
#about{
padding:80px 0 80px 0;
display:block;
}
#about .leftbox{
width:calc(100% - 20px);
margin:0 auto 0 0;
padding:0 0 0 20px;
border-bottom:1px solid #cc9900;
}
#about .leftbox img{
width:100%;
max-width:670px;
height:auto;
margin:0 auto;
padding:0 0 40px 0;
}
#about .rightbox{
width:100%;
padding:40px 20px 0 20px;
}
#about .textbox{width:100%;}
#about .textbox br{display:none;}
}

/* --------------------------------- CSS Information 
 Style Info: MOVIE
------------------------------------------------- */
.movie{
margin:0;
padding:0;
width:100%;
position:relative;
box-sizing:border-box;
}
.movie_wrapper{
margin:0;
padding:0;
width:100%;
position:relative;
box-sizing:border-box;
}
.movie_box{
position:relative;
width:100%;
margin:0; 
padding-top:56.25%;
}
.movie_box iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
box-sizing:border-box;
}

/* ------------------------------------------- CSS Information 
 Style Info: NAV_INNER
----------------------------------------------------------- */
#nav_inner{
width:100%;
margin:0;
padding:0;
position:relative;
display:flex;
align-items:stretch;
justify-content:center;
background:#000000;
}
#nav_inner .nav_bg{
position:relative;
overflow:hidden;
width:25%;
height:auto;
margin:0;
padding:0;
}
#nav_inner .nav_bg:after{
content:"";
position:absolute;
display:block;
width:100%;
height:100%;
margin:0;
padding:0;
top:0;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
transition:all .3s ease-out;
}
#nav_inner .nav_bg:hover:after{
transform:scale(1.2);
filter:blur(4px);
}
#nav_inner .nav_bg.src1:after{background-image:url(../img/nav_inner01_bg.png);}
#nav_inner .nav_bg.src2:after{background-image:url(../img/nav_inner02_bg.png);}
#nav_inner .nav_bg.src3:after{background-image:url(../img/nav_inner03_bg.png);}
#nav_inner .nav_bg.src4:after{background-image:url(../img/nav_inner04_bg.png);}
#nav_inner .inner_box{
position:relative;
width:100%;
padding-top:100%;
z-index:5;
}
#nav_inner .inner_box a{
position:absolute;
display:block;
width:100%;
height:100%;
top:0;
left:0;
z-index:6;
}
#nav_inner .inner_box a img{
position:absolute;
width:100%;
max-width:240px;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
transform:translateX(0);
transition:all .5s;
}
#nav_inner .nav_bg .inner_box a:hover img{
transform:translateX(8px);
transition:all .3s;
}
@media only screen and (max-width:750px){
#nav_inner{}
#nav_inner .nav_bg{}
#nav_inner .nav_bg:after{
content:"";
position:absolute;
display:block;
width:100%;
height:100%;
margin:0;
padding:0;
top:0;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
transition:all .3s ease-out;
}
#nav_inner .nav_bg:hover:after{}
#nav_inner .inner_box{}
#nav_inner .inner_box a{}
#nav_inner .inner_box a img{
transform:translateX(0);
transition:all .5s;
}
#nav_inner .nav_bg .inner_box a:hover img{
transform:translateX(4px);
transition:all .3s;
}
}

/* ---------------------- CSS Information 
 Style Info: 共通設定
--------------------------------------- */
.wrapper{
display:flex;
align-items:flex-start;
width:100%;
min-width:960px;
margin:0;
padding:0;
position:relative;
box-sizing:border-box;
}
.title_box{
position:-webkit-sticky;
position:sticky;
top:0;
left:0;
width:180px;
margin:0 auto 0 0;
padding:0;
box-sizing:border-box;
}
.title_box img{width:100%;}
.main_box{
width:calc(100% - 180px);
min-width:780px;
margin:0 0 0 auto;
padding:60px 0 120px 0;
box-sizing:border-box;
}
.indexbox{
width:100%;
margin:0 auto 0 0;
padding:60px 0 60px 0;
box-sizing:border-box;
}
.indexbox img{
width:100%;
max-width:780px;
margin:0 auto 0 0;
padding:0;
}
@media only screen and (max-width:959px){
.wrapper{min-width:320px;}
.title_box{width:80px;}
.title_box img{}
.main_box{
width:calc(100% - 80px);
min-width:240px;
padding:30px 0 60px 0;
}
.indexbox{padding:30px 0 30px 0;}
.indexbox img{max-width:290px;}
}


/* ---------------------- CSS Information 
 Style Info: BTN
--------------------------------------- */
.cta{
width:100%;
margin:0;
padding:80px 40px 80px 40px;
background:#22262b url(../img/cta_bg.png) no-repeat center;
background-size:cover;
box-sizing:border-box;
}
.cta_logo{
width:160px;
height:140px;
margin:0 auto 40px auto;
}
.btn_img{
width:100%;
max-width:660px;
margin:0 auto;
padding:0;
box-sizing:border-box;
text-align:center;
position:relative;
}
.btn_img img{width:100%;margin:0;padding:0;}
.limit{
display:inline-block;
width:480px;
margin:20px auto 0 auto;
padding:5px 5px;
font-size:20px;
line-height:30px;
text-align:center;
color:#333333;
font-weight:bold;
box-sizing:border-box;
border-top:1px solid #999999;
border-bottom:1px solid #999999;
}
@media only screen and (max-width:959px){
.cta{padding:30px 20px 30px 20px;}
.cta_logo{
width:128px;
height:112px;
margin:0 auto 20px auto;
}
.btn_img{max-width:300px;}
.btn_img img{}
.limit{margin:0 auto;width:300px;font-size:14px;line-height:20px;}
}


/* ---------------------- CSS Information 
 Style Info: WHY
--------------------------------------- */
#why{
width:100%;
margin:0;
padding:0;
position:relative;
box-sizing:border-box;
background:#2b3336;
}
#why .main_box{overflow-x:hidden;}
#why .imgbox{
width:100%;
box-sizing:border-box;
margin:0 0 -20% 0;
padding:0;
}
#why .imgbox img{width:100%;margin:0;padding:0;}
#why .textbox{
position:relative;
width:50%;
min-width:600px;
margin:0 0 0 auto;
padding:40px 40px;
text-align:justify;
box-sizing:border-box;
background:rgba(255,255,255,0.9);
z-index:5;
}
@media only screen and (max-width:959px){
#why{}
#why .main_box{padding:30px 0 60px 0;}
#why .imgbox{margin:0;}
#why .imgbox img{}
#why .textbox{
width:100%;
min-width:240px;
padding:30px 20px;
text-align:justify;
}
#why .textbox .text br{display:none;}
}

/* ---------------------- CSS Information 
 Style Info: CHARM
--------------------------------------- */
#charm{
width:100%;
margin:0;
padding:0;
position:relative;
box-sizing:border-box;
background:#f0f1ec;
}
#charm .main_box{}
#charm .flexbox.flexbox01{
display:flex;
align-items:flex-start;
width:100%;
margin:0 0 60px 0;
padding:0;
position:relative;
box-sizing:border-box;
}
#charm .flexbox.flexbox01 .imgbox{
position:-webkit-sticky;
position:sticky;
top:0;
left:0;
width:40%;
box-sizing:border-box;
margin:0;
padding:60px 40px 60px 0;
}
#charm .flexbox.flexbox01 .imgbox img{
width:100%;
max-width:400px;
margin:0 auto 0 0;
padding:0;
}
#charm .flexbox.flexbox01 .textbox{
position:relative;
width:60%;
min-width:540px;
margin:0 0 0 auto;
padding:0 0 60px 0;
text-align:justify;
box-sizing:border-box;
z-index:5;
overflow-x:hidden;
}
#charm .flexbox.flexbox01 .textbox .captionbox{
margin:0;
padding:60px 0 40px 0;
}
#charm .flexbox.flexbox01 .textbox .captionbox img{
width:100%;
max-width:560px;
margin:0 auto 0 0;
}
#charm .flexbox.flexbox01 .textbox .text{padding:0 40px;}
span.passive{color:#895c3b;}
span.active{color:#929397;}
span.aggressive{color:#c68600;}
ul.charm_list01{
margin:0 0 60px 0;
padding:20px;
border:1px solid #cc9900;
}
ul.charm_list01 li,ul.charm_list02 li{
font-size:17px;
line-height:30px;
font-weight:bold;
margin:0 0 20px 0;
padding:0 0 0 5px;
}
ul.charm_list01 li:last-child,ul.charm_list02 li:last-child,ul.charm_list04 li:last-child{margin:0;}
li.passive{border-left:5px solid #895c3b;}
li.active{border-left:5px solid #929397;}
li.aggressive{border-left:5px solid #c68600;}
li.aggressive span{
display:inline-block;
background:#c68600;
color:#ffffff;
font-size:14px;
margin:0 0 0 4px;
padding:0 4px;
vertical-align:middle;
}
dl.charm_list03{
margin:0 0 30px 0;
padding:20px;
}
dl.charm_list03.passive{border:1px solid #895c36;}
dl.charm_list03.passive dt{color:#895c36;font-weight:bold;}
dl.charm_list03.active{border:1px solid #929397;}
dl.charm_list03.active dt{color:#929397;font-weight:bold;}
dl.charm_list03.aggressive{border:1px solid #c68600;}
dl.charm_list03.aggressive dt{color:#c68600;font-weight:bold;}
ul.charm_list04 li{
margin:0 0 10px 0;
padding:0 0 0 5px;
border-left:5px solid #d2af36;
}

/*PROFILE----------*/
#profile{}
#profile .captionbox{
width:100%;
margin:0;
padding:30px 0;
font-size:18px;
line-height:20px;
font-weight:bold;
color:#cc9900;
box-sizing:border-box;
background:-moz-linear-gradient(top,#111111,#2b3336);
background:-webkit-linear-gradient(top,#111111,#2b3336);
background:linear-gradient(to bottom,#111111,#2b3336);
}
#profile .captionbox img{
width:100%;
max-width:780px;
margin:0 auto;
}
#profile .flexbox{
display:flex;
align-items:stretch;
width:100%;
margin:0;
padding:0;
position:relative;
box-sizing:border-box;
}
.profile_box{
width:33.3%;
margin:0;
padding:0;
}
.profile_box.profile01{background:#ffffff;}
.profile_box.profile02{background:#fafafa;}
.profile_box.profile03{background:#ffffff;}
.profile_box .imgbox{
width:100%;
margin:0;
padding:0;
}
.profile_box .imgbox img{
width:100%;
margin:0;
padding:0;
}
.profile_box .textbox{
position:relative;
width:100%;
margin:0;
padding:30px 0;
box-sizing:border-box;
z-index:5;
}
.profile_box .profile_name{
margin:0 30px 0 0;
padding:0 0 30px 30px;
border-bottom:1px solid #cc9900;
}
.profile_box .profile_name img{
width:100%;
max-width:200px;
margin:0 auto 0 0;
}
.profile_box .text{
width:100%;
margin:0;
padding:30px 30px 0 30px;
text-align:justify;
box-sizing:border-box;
}
@media only screen and (max-width:959px){
#charm{}
#charm .main_box{padding:30px 0 60px 0;}
#charm .flexbox.flexbox01{
display:block;
margin:0 0 30px 0;
}
#charm .flexbox.flexbox01 .imgbox{
position:relative;
width:100%;
margin:0;
padding:30px 0 0 0;
}
#charm .flexbox.flexbox01 .imgbox img{max-width:290px;}
#charm .flexbox.flexbox01 .textbox{
width:100%;
min-width:240px;
margin:0 0 0 auto;
padding:0 0 30px 0;
}
#charm .flexbox.flexbox01 .textbox .captionbox{
margin:0;
padding:60px 0 40px 0;
}
#charm .flexbox.flexbox01 .textbox .captionbox img{max-width:290px;}
#charm .flexbox.flexbox01 .textbox .text{padding:0 20px;}
span.passive{color:#895c3b;}
span.active{color:#929397;}
span.aggressive{color:#c68600;}
ul.charm_list01{
margin:0 0 30px 0;
padding:20px;
}
ul.charm_list01 li,ul.charm_list02 li{
font-size:15px;
line-height:24px;
margin:0 0 30px 0;
padding:0 0 0 6px;
}
li.passive{border-left:4px solid #895c3b;}
li.active{border-left:4px solid #929397;}
li.aggressive{border-left:4px solid #c68600;}
li.aggressive span{margin:0;}
dl.charm_list03{padding:10px;}
ul.charm_list04 li{
margin:0 0 10px 0;
padding:0 0 0 5px;
border-left:5px solid #d2af36;
}
/*PROFILE----------*/
#profile{}
#profile .captionbox{padding:20px 0;font-size:14px;line-height:20px;}
#profile .captionbox img{max-width:240px;}
#profile .flexbox{display:block;}
.profile_box{width:100%;}
.profile_box.profile01{}
.profile_box.profile02{}
.profile_box.profile03{}
.profile_box .imgbox{}
.profile_box .imgbox img{}
.profile_box .textbox{padding:20px 0;}
.profile_box .profile_name{margin:0 20px 0 0;padding:0 0 20px 20px;}
.profile_box .profile_name img{max-width:160px;}
.profile_box .text{padding:20px 20px 0 20px;}
#charm .text br{display:none;}
}

/* ---------------------- CSS Information 
 Style Info: TALK
--------------------------------------- */
#talk{
width:100%;
margin:0;
padding:0;
position:relative;
box-sizing:border-box;
background:#2b3336;
}
#talk .main_box{overflow-x:hidden;}
#talk .flexbox{
display:flex;
align-items:stretch;
width:100%;
box-sizing:border-box;
margin:0;
padding:0;
}
#talk .flexbox.talk01{flex-direction:row;}
#talk .flexbox.talk02{flex-direction:row-reverse;}
#talk .flexbox.talk03{flex-direction:row;}
#talk .imgbox{
width:50%;
box-sizing:border-box;
margin:0;
padding:0;
overflow:hidden;
position:relative;
background-repeat:no-repeat;
background-size:cover;
}
#talk .imgbox.src1{background-image:url(../img/talk01_img.png);background-position:center left;}
#talk .imgbox.src2{background-image:url(../img/talk02_img.png);background-position:center;}
#talk .imgbox.src3{background-image:url(../img/talk03_img.png);background-position:center;}
#talk .imgbox img{display:none;}
#talk .textbox{
position:relative;
width:50%;
margin:0 0 0 auto;
padding:40px 30px 10px 30px;
text-align:justify;
box-sizing:border-box;
background:rgba(255,255,255,0.9);
z-index:5;
}
#talk .textbox dl{margin:0;padding:0 0 30px 0;}
#talk .textbox dl.shidahara{color:#444cb4;}
#talk .textbox dl.horiuchi{color:#537d8c;}
#talk .textbox dl dt{font-weight:bold;}
#talk .textbox dl dd{margin:0;padding:0 0 30px 0;}
#talk .textbox dl dd:last-child{margin:0;padding:0;}
@media only screen and (max-width:959px){
#talk{}
#talk .main_box{padding:30px 0 60px 0;}
#talk .flexbox{}
#talk .flexbox.talk01{flex-direction:column-reverse;}
#talk .flexbox.talk02{flex-direction:column-reverse;}
#talk .flexbox.talk03{flex-direction:column-reverse;}
#talk .imgbox{width:100%;}
#talk .imgbox.src1{background-image:none;}
#talk .imgbox.src2{background-image:none;}
#talk .imgbox.src3{background-image:none;}
#talk .imgbox img{display:block;width:100%;}
#talk .textbox{
width:100%;
padding:30px 20px 10px 20px;
}
#talk .textbox dl{padding:0 0 20px 0;}
#talk .textbox dl.shidahara{}
#talk .textbox dl.horiuchi{}
#talk .textbox dl dt{}
#talk .textbox dl dd{padding:0 0 20px 0;}
#talk .textbox dl dd:last-child{margin:0;padding:0;}
}

/* ------------------------------------------- CSS Information 
 Style Info: SUMMARY
----------------------------------------------------------- */
#summary{
width:100%;
margin:0;
padding:0;
position:relative;
box-sizing:border-box;
background:#f0f1ec;
}
#summary .main_box{overflow-x:hidden;}
#summary .captionbox{
width:100%;
margin:0;
padding:30px 0;
font-size:18px;
line-height:20px;
font-weight:bold;
color:#cc9900;
box-sizing:border-box;
background:-moz-linear-gradient(top,#111111,#2b3336);
background:-webkit-linear-gradient(top,#111111,#2b3336);
background:linear-gradient(to bottom,#111111,#2b3336);
}
#summary .captionbox img{
width:100%;
max-width:560px;
margin:0 auto;
}
/*POLICY----------*/
#policy{}
#nav_policy{
width:100%;
margin:0;
padding:0;
position:relative;
display:flex;
align-items:stretch;
justify-content:center;
background:#000000;
}
#nav_policy .nav_bg{
position:relative;
overflow:hidden;
width:20%;
height:auto;
margin:0;
padding:0;
}
#nav_policy .nav_bg:after{
content:"";
position:absolute;
display:block;
width:100%;
height:100%;
margin:0;
padding:0;
top:0;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
transition:all .3s ease-out;
}
#nav_policy .nav_bg:hover:after{
transform:scale(1.2);
filter:blur(4px);
}
#nav_policy .nav_bg.src1:after{background-image:url(../img/nav_policy01_bg.png);}
#nav_policy .nav_bg.src2:after{background-image:url(../img/nav_policy02_bg.png);}
#nav_policy .nav_bg.src3:after{background-image:url(../img/nav_policy03_bg.png);}
#nav_policy .nav_bg.src4:after{background-image:url(../img/nav_policy04_bg.png);}
#nav_policy .nav_bg.src5:after{background-image:url(../img/nav_policy05_bg.png);}
#nav_policy .inner_box{
position:relative;
width:100%;
padding-top:100%;
z-index:5;
}
#nav_policy .inner_box a{
position:absolute;
display:block;
width:100%;
height:100%;
top:0;
left:0;
z-index:6;
}
#nav_policy .inner_box a img{
position:absolute;
width:100%;
max-width:180px;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
transform:translateX(0);
transition:all .5s;
}
#nav_policy .nav_bg .inner_box a:hover img{
transform:translateX(8px);
transition:all .3s;
}
#policy .flexbox{
display:flex;
align-items:stretch;
}
#policy .flexbox#learn{flex-direction:row;}
#policy .flexbox#research{flex-direction:row;}
#policy .flexbox#play{flex-direction:row;}
#policy .flexbox#share{flex-direction:row-reverse;}
#policy .flexbox#investment{flex-direction:row-reverse;}

#policy .flexbox .imgbox{
width:50%;
box-sizing:border-box;
margin:0;
padding:0;
background-repeat:no-repeat;
background-size:cover;
}
#policy .flexbox .imgbox.src1{background-image:url(../img/policy01_img.png);background-position:center;}
#policy .flexbox .imgbox.src2{background-image:url(../img/policy02_img.png);background-position:center left;}
#policy .flexbox .imgbox.src3{background-image:url(../img/policy03_img.png);background-position:center;}
#policy .flexbox .imgbox.src4{background-image:url(../img/policy04_img.png);background-position:center right;}
#policy .flexbox .imgbox.src5{background-image:url(../img/policy05_img.png);background-position:center;}
#policy .flexbox .imgbox img{display:none;}
#policy .flexbox .textbox{
position:relative;
width:50%;
margin:0 0 0 auto;
padding:40px 0;
text-align:justify;
box-sizing:border-box;
background:#ffffff;
z-index:5;
}
#policy .flexbox .textbox .policy_caption{
margin:0 40px 0 0;
padding:0 0 40px 40px;
border-bottom:1px solid #cc9900;
}
#policy .flexbox .textbox .policy_caption img{
width:100%;
max-width:240px;
margin:0 auto 0 0;
}
#policy .flexbox .text{padding:40px 40px 0 40px;}
#policy .flexbox .text dl{
margin:0 0 30px 0;
padding:0;
border:1px solid #cc9900;
}
#policy .flexbox .text dt{
margin:0;
padding:5px 10px;
background:#cc9900;
color:#ffffff;
}
#policy .flexbox .text dd{
margin:20px;
padding:0 0 0 5px;
border-left:5px solid #d2af36;
}
#policy .flexbox .text li{
margin:0 0 10px 0;
padding:0 0 0 5px;
border-left:5px solid #d2af36;
}
/*MEETING----------*/
#meeting{margin:0;}
#meeting .flexbox{display:flex;}
#meeting .flexbox.meeting01{flex-direction:row;}
#meeting .flexbox.meeting02{flex-direction:row-reverse;}
#meeting .flexbox .imgbox{
width:50%;
box-sizing:border-box;
margin:0;
padding:0;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
#meeting .flexbox .imgbox.src1{background-image:url(../img/meeting01_img.png);}
#meeting .flexbox .imgbox.src2{background-image:url(../img/meeting02_img.png);}
#meeting .flexbox .imgbox img{display:none;}
#meeting .flexbox .textbox{
position:relative;
width:50%;
margin:0 0 0 auto;
padding:40px 0;
text-align:justify;
box-sizing:border-box;
background:#ffffff;
z-index:5;
}
#meeting .flexbox .textbox .meeting_caption{
width:100%;
margin:0 auto 0 0;
padding:0 0 40px 0;
}
#meeting .flexbox .textbox .meeting_caption img{
width:100%;
max-width:390px;
margin:0 auto 0 0;
padding:0;
}
#meeting .flexbox .textbox .text{padding:0 40px;}
#meeting .flexbox .textbox .text .inner_flexbox{
display:flex;
margin:0 0 30px 0;
padding:20px;
border:1px solid #cc9900;
}
#meeting .flexbox .textbox .text .inner_flexbox ul{margin:0;padding:0;}
#meeting .flexbox .textbox .text .inner_flexbox.small{
margin:0;
padding:0;
border:none;
font-size:14px;
line-height:24px;
}
/*INSPECTION----------*/
#inspection{margin:60px 0 0 0;}
#inspection .flexbox{display:flex;}
#inspection .flexbox .imgbox{
width:50%;
box-sizing:border-box;
margin:0;
padding:0;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
#inspection .flexbox .imgbox.src1{background-image:url(../img/inspection01_img.png);}
#inspection .flexbox .imgbox.src2{background-image:url(../img/inspection02_img.png);}
#inspection .flexbox .imgbox img{display:none;}
#inspection .flexbox .textbox{
position:relative;
width:50%;
margin:0 0 0 auto;
padding:40px 40px;
text-align:justify;
box-sizing:border-box;
background:#ffffff;
z-index:5;
}
#inspection .flexbox .textbox .text li{
margin:0 0 10px 0;
padding:0 0 0 5px;
border-left:5px solid #d2af36;
}
@media only screen and (max-width:959px){
#summary{}
#summary .main_box{padding:30px 0 60px 0;}
#summary .captionbox{padding:20px 0;font-size:14px;line-height:20px;}
#summary .captionbox img{max-width:240px;}
/*POLICY----------*/
#policy{}
#nav_policy{}
#nav_policy .nav_bg{}
#nav_policy .nav_bg:after{}
#nav_policy .nav_bg:hover:after{}
#nav_policy .nav_bg.src1:after{}
#nav_policy .nav_bg.src2:after{}
#nav_policy .nav_bg.src3:after{}
#nav_policy .nav_bg.src4:after{}
#nav_policy .nav_bg.src5:after{}
#nav_policy .inner_box{}
#nav_policy .inner_box a{}
#nav_policy .inner_box a img{
max-width:50px;
transform:translateX(0);
transition:all .5s;
}
#nav_policy .nav_bg .inner_box a:hover img{
transform:translateX(4px);
transition:all .3s;
}
#policy .flexbox{}
#policy .flexbox#learn{flex-direction:column;}
#policy .flexbox#research{flex-direction:column;}
#policy .flexbox#play{flex-direction:column;}
#policy .flexbox#share{flex-direction:column;}
#policy .flexbox#investment{flex-direction:column;}
#policy .flexbox .imgbox{width:100%;}
#policy .flexbox .imgbox.src1{background-image:none;}
#policy .flexbox .imgbox.src2{background-image:none;}
#policy .flexbox .imgbox.src3{background-image:none;}
#policy .flexbox .imgbox.src4{background-image:none;}
#policy .flexbox .imgbox.src5{background-image:none;}
#policy .flexbox .imgbox img{display:block;width:100%;}
#policy .flexbox .textbox{
width:100%;
padding:30px 0;
}
#policy .flexbox .textbox .policy_caption{
margin:0 20px 0 0;
padding:0 0 30px 20px;
}
#policy .flexbox .textbox .policy_caption img{max-width:160px;}
#policy .flexbox .text{padding:30px 20px 0 20px;}
#policy .flexbox .text dl{}
#policy .flexbox .text dt{}
#policy .flexbox .text dd{}
/*MEETING----------*/
#meeting{}
#meeting .flexbox{}
#meeting .flexbox.meeting01{flex-direction:column;}
#meeting .flexbox.meeting02{flex-direction:column;}
#meeting .flexbox .imgbox{width:100%;}
#meeting .flexbox .imgbox.src1{background-image:none;}
#meeting .flexbox .imgbox.src2{background-image:none;}
#meeting .flexbox .imgbox img{display:block;width:100%;}
#meeting .flexbox .textbox{width:100%;padding:30px 0;}
#meeting .flexbox .textbox .meeting_caption{padding:0 0 30px 0;}
#meeting .flexbox .textbox .meeting_caption img{max-width:240px;}
#meeting .flexbox .textbox .text{padding:0 20px;}
#meeting .flexbox .textbox .text .inner_flexbox{flex-direction:column;padding:10px;}
#meeting .flexbox .textbox .text .inner_flexbox ul{}
#meeting .flexbox .textbox .text .inner_flexbox.small{flex-direction:row;font-size:12px;line-height:20px;}
/*INSPECTION----------*/
#inspection{}
#inspection .flexbox{display:flex;flex-direction:column;}
#inspection .flexbox .imgbox{width:100%;}
#inspection .flexbox .imgbox img{display:block;width:100%;}
#inspection .flexbox .imgbox.src1{background-image:none;}
#inspection .flexbox .imgbox.src2{background-image:none;}
#inspection .flexbox .textbox{width:100%;padding:20px 20px;}
#inspection .flexbox .textbox .text li{}
}

/* ---------------------- CSS Information 
 Style Info: MESSAGE
--------------------------------------- */
#message{
width:100%;
margin:0;
padding:0;
position:relative;
box-sizing:border-box;
background:#2b3336;
}
#message .main_box{padding:120px 0 120px 0;overflow-x:hidden;}
#message .imgbox{
width:100%;
box-sizing:border-box;
margin:0 0 -20% 0;
padding:0;
}
#message .imgbox img{
width:100%;
margin:0;
padding:0;
}
#message .textbox{
position:relative;
width:50%;
min-width:560px;
margin:0 0 0 auto;
padding:40px 40px;
text-align:justify;
box-sizing:border-box;
background:rgba(255,255,255,0.9);
z-index:5;
}
#message .sign_img{
display:inline-block;
width:240px;
height:45px;
margin:0;
padding:0;
}
@media only screen and (max-width:959px){
#message{}
#message .main_box{padding:30px 0 60px 0;}
#message .imgbox{margin:0;}
#message .imgbox img{}
#message .textbox{
width:100%;
min-width:240px;
padding:30px 20px;
text-align:justify;
}
#message .sign_img{
width:120px;
height:auto;
}
#message .textbox .text br{display:none;}
}

/* ---------------------- CSS Information 
 Style Info: APPLY
--------------------------------------- */
#apply{
width:100%;
margin:0;
padding:0;
position:relative;
box-sizing:border-box;
background:#f0f1ec;
}
#apply .main_box{padding:120px 0 120px 0;overflow-x:hidden;}
#apply .captionbox{
width:100%;
margin:0;
padding:30px 0;
font-size:18px;
line-height:20px;
font-weight:bold;
color:#cc9900;
box-sizing:border-box;
background:-moz-linear-gradient(top,#111111,#2b3336);
background:-webkit-linear-gradient(top,#111111,#2b3336);
background:linear-gradient(to bottom,#111111,#2b3336);
}
#apply .captionbox img{
width:100%;
max-width:560px;
margin:0 auto;
}
.apply_category{
width:100%;
margin:60px 0 0 0;
padding:30px 40px;
position:relative;
box-sizing:border-box;
font-size:18px;
line-height:30px;
font-weight:bold;
text-align:left;
color:#ffffff;
background:#cc9900;
}
#apply .flexbox{
display:flex;
align-items:stretch;
width:100%;
margin:0;
padding:0;
position:relative;
box-sizing:border-box;
}
#apply .imgbox{
width:50%;
box-sizing:border-box;
margin:0;
padding:0;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
background-color:#ffffff;
}
#apply .imgbox.src1{background-image:url(../img/apply01_img.png);}
#apply .imgbox.src2{background-image:url(../img/apply02_img.png);}
#apply .imgbox.src3{background-image:url(../img/apply03_img.png);}
#apply .imgbox.src4{background-image:url(../img/apply04_img.png);}
#apply .imgbox.src5{background-image:url(../img/apply05_img.png);}
#apply .imgbox.src6{background-image:url(../img/apply06_img.png);}
#apply .imgbox.src7{background-image:url(../img/apply07_img.png);background-size:240px 220px;}
#apply .imgbox img{display:none;}
#apply .textbox{
position:relative;
width:50%;
min-height:400px;
margin:0 0 0 auto;
padding:40px 0;
text-align:justify;
box-sizing:border-box;
background:#ffffff;
z-index:5;
}
#apply .textbox .service_caption{
margin:0;
padding:0 0 40px 0;
}
#apply .textbox .service_caption img{
width:100%;
max-width:520px;
margin:0 auto 0 0;
}
#apply .textbox .text{
margin:0;
padding:0 40px;
}
#apply .textbox .text dl{
border:1px solid #d2af36;
margin:0;
padding:20px;
}
#apply .textbox .text dt{
font-weight:bold;
}
#apply .textbox .text dd.payment_attention{
margin:20px 0 0 0;
font-size:14px;
line-height:20px;
color:#666666;
}
@media only screen and (max-width:959px){
#apply{}
#apply .main_box{padding:30px 0 60px 0;}
#apply .captionbox{
padding:20px 0;
font-size:16px;
line-height:20px;
}
#apply .captionbox img{max-width:240px;}
.apply_category{
width:100%;
margin:30px 0 0 0;
padding:20px 20px;
font-size:14px;
line-height:20px;
}
#apply .flexbox{flex-direction:column;}
#apply .imgbox{width:100%;}
#apply .imgbox.src1{background-image:none;}
#apply .imgbox.src2{background-image:none;}
#apply .imgbox.src3{background-image:none;}
#apply .imgbox.src4{background-image:none;}
#apply .imgbox.src5{background-image:none;}
#apply .imgbox.src6{background-image:none;}
#apply .imgbox.src7{background-image:none;}
#apply .imgbox img{display:block;width:100%;}
#apply .textbox{
width:100%;
min-height:100px;
padding:30px 0;
}
#apply .textbox .service_caption{padding:0 0 30px 0;}
#apply .textbox .service_caption img{max-width:240px;}
#apply .textbox .text{padding:0 20px;}
#apply .textbox .text dl{padding:20px;}
#apply .textbox .text dt{}
#apply .textbox .text dd.payment_attention{font-size:12px;}
}


/* ---------------------- CSS Information 
 Style Info: FOOTER
--------------------------------------- */
footer{
width:100%;
margin:0;
padding:0;
color:#d1d1d1;
background:#121212;
font-size:12px;
}
#fnav a{color:#d1d1d1;text-decoration:none;}
#fnav a:hover{color:#d1d1d1;text-decoration:underline;}
dl.disclaim{
width:100%;
max-width:720px;
margin:0 auto;
padding:40px 20px 0 20px;
box-sizing:border-box;
}
dl.disclaim dt{
margin:0 0 10px 0;
padding:0 0 0 8px;
text-align:left;
font-size:12px;
line-height:20px;
border-left:2px solid #cc9900;
}
dl.disclaim dd{
text-align:left;
font-size:12px;
line-height:20px;
}
#fnav{
margin:0 20px;
padding:40px 0;
}
#fnav ul{list-style-type:none;}
#fnav li{
display:inline-block;
margin:0 40px 20px 0;
padding:0 0 0 8px;
text-align:left;
font-size:12px;
line-height:20px;
border-left:2px solid #cc9900;
}
#fnav li:last-child{margin:0 0 20px 0;}
address{
display:block;
margin:0 20px;
padding:40px 0;
border-top:1px solid #404040;
text-align:center;
font-size:12px;
line-height:20px;
}
@media only screen and (max-width:959px){
footer{}
dl.disclaim{max-width:960px;}
dl.disclaim dt{}
dl.disclaim dd{}
#fnav{
margin:0 20px;
padding:40px 0;
}
#fnav ul{list-style-type:none;}
#fnav li{
display:block;
margin:0 0 20px 0;
}
#fnav li:last-child{margin:0;}
address{}
dl.disclaim dd br{display:none;}
.sp_no{display:none;}
}


/* --------------------------------- CSS Information 
 Style Info: fadein
------------------------------------------------- */
.fadein{opacity:0;transition:all ease 1s;}
.fadein.scrollin{opacity:1;}
/*左から----------*/
.fadein_left{
opacity:0;
transform:translateX(-40px);
transition:all 1s;
}
.fadein_left.scrollin{
opacity:1;
transform:translateX(0);
}
/*右から----------*/
.fadein_right{
opacity:0;
transform:translateX(40px);
transition:all 1s;
}
.fadein_right.scrollin{
opacity:1;
transform:translateX(0);
}
/*上から----------*/
.fadein_top{
opacity:0;
transform:translateY(-20px);
transition:all 1s;
}
.fadein_top.scrollin{
opacity:1;
transform:translateY(0);
}
/*下から----------*/
.fadein_bottom{
opacity:0;
transform:translateY(20px);
transition:all 1s;
}
.fadein_bottom.scrollin{
opacity:1;
transform:translateY(0);
}