@charset "UTF-8";

*{
margin:0;
padding:0;
color:#555;
line-height:1;
box-sizing:border-box;
-webkit-text-size-adjust:100%;
-moz-text-size-adjust:100%;
-ms-text-size-adjust:100%;
-o-text-size-adjust:100%;
text-size-adjust:100%;
/*font-family:"Helvetica Neue", Helvetica, "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Arial, Verdana, sans-serif;*/
font-family:"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{
font-size:14px;
}
html,
body{
margin:0;
padding:0;
}

/*=== リンク選択時の点線を消す ===*/
img, a img{
border-style:none;
outline:none;
}
a:link, a:hover, a:visited{
border-style:none;
outline:none;
text-decoration:none;
}

/*=== ie6~8表示 ===*/
.ieerror{
position:fixed;
top:0;right:0;bottom:0;left:0;
width:100%;
height:100%;
text-align:center;
z-index:1000000;
font-size:14px;
background:#fff;
}
.ieerror-in{
display:inline-block;
position:relative;
top:50%;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-o-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
color:#000000;
}
.ieerror a{
color:#000000;
}
ieerror a:hover{
color:#000000;
}
/*=== noscript ===*/
.h-noscript{
position:fixed;
top:0;right:0;bottom:0;left:0;
width:100%;
height:100%;
text-align:center;
z-index:1100000;
font-size:14px;
background:#fff;
}
.h-noscript-txt{
display:block;
width:100%;
position:absolute;
top:45%;
color:#000000;
text-align:center;
}
.h-noscript-txt span{
color:#000000;
padding:10px 15px;
border:solid 1px #000000;
}



/*=== spacer ===*/
.spacer-h0 { display:block; height:0px; text-indent:-9999px; clear:both;}
.spacer-h1 { display:block; height:1px; text-indent:-9999px; clear:both;}
.spacer-h2 { display:block; height:2px; text-indent:-9999px; clear:both;}
.spacer-h3 { display:block; height:3px; text-indent:-9999px; clear:both;}
.spacer-h4 { display:block; height:4px; text-indent:-9999px; clear:both;}
.spacer-h5 { display:block; height:5px; text-indent:-9999px; clear:both;}
.spacer-h6 { display:block; height:6px; text-indent:-9999px; clear:both;}
.spacer-h7 { display:block; height:7px; text-indent:-9999px; clear:both;}
.spacer-h8 { display:block; height:8px; text-indent:-9999px; clear:both;}
.spacer-h9 { display:block; height:9px; text-indent:-9999px; clear:both;}
.spacer-h10 { display:block; height:10px; text-indent:-9999px; clear:both;}
.spacer-h15 { display:block; height:15px; text-indent:-9999px; clear:both;}
.spacer-h20 { display:block; height:20px; text-indent:-9999px; clear:both;}
.spacer-h25 { display:block; height:25px; text-indent:-9999px; clear:both;}
.spacer-h30 { display:block; height:30px; text-indent:-9999px; clear:both;}
.spacer-h35 { display:block; height:35px; text-indent:-9999px; clear:both;}
.spacer-h40 { display:block; height:40px; text-indent:-9999px; clear:both;}
.spacer-h45 { display:block; height:45px; text-indent:-9999px; clear:both;}
.spacer-h50 { display:block; height:50px; text-indent:-9999px; clear:both;}
.spacer-h55 { display:block; height:55px; text-indent:-9999px; clear:both;}
.spacer-h60 { display:block; height:60px; text-indent:-9999px; clear:both;}
.spacer-h65 { display:block; height:65px; text-indent:-9999px; clear:both;}
.spacer-h70 { display:block; height:70px; text-indent:-9999px; clear:both;}
.spacer-h75 { display:block; height:75px; text-indent:-9999px; clear:both;}
.spacer-h80 { display:block; height:80px; text-indent:-9999px; clear:both;}
.spacer-h85 { display:block; height:85px; text-indent:-9999px; clear:both;}
.spacer-h90 { display:block; height:90px; text-indent:-9999px; clear:both;}
.spacer-h95 { display:block; height:95px; text-indent:-9999px; clear:both;}
.spacer-h100 { display:block; height:100px; text-indent:-9999px; clear:both;}
.spacer-h110 { display:block; height:110px; text-indent:-9999px; clear:both;}
.spacer-h120 { display:block; height:120px; text-indent:-9999px; clear:both;}
.spacer-h130 { display:block; height:130px; text-indent:-9999px; clear:both;}
.spacer-h140 { display:block; height:140px; text-indent:-9999px; clear:both;}
.spacer-h150 { display:block; height:150px; text-indent:-9999px; clear:both;}
.spacer-h160 { display:block; height:160px; text-indent:-9999px; clear:both;}
.spacer-h170 { display:block; height:170px; text-indent:-9999px; clear:both;}
.spacer-h180 { display:block; height:180px; text-indent:-9999px; clear:both;}
.spacer-h190 { display:block; height:190px; text-indent:-9999px; clear:both;}
.spacer-h200 { display:block; height:200px; text-indent:-9999px; clear:both;}

.clear{
clear:both;
}

/*=== letterspacing ===*/
.ltrspc-1{letter-spacing:1px;}
.ltrspc-2{letter-spacing:2px;}
.ltrspc-3{letter-spacing:3px;}
.ltrspc-4{letter-spacing:4px;}
.ltrspc-5{letter-spacing:5px;}
.ltrspc-6{letter-spacing:6px;}
.ltrspc-7{letter-spacing:7px;}
.ltrspc-8{letter-spacing:8px;}
.ltrspc-9{letter-spacing:9px;}
.ltrspc-10{letter-spacing:10px;}

/*=== font ===*/
.fontGothic{
font-family:"游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.fontMincho{
font-family:"Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
}
.fontFamMG,
a.fontFamMG{
font-family:"Helvetica Neue", Helvetica, "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Arial, Verdana, sans-serif !important;
}
.fontFamHMC,
a.fontFamHMC{
font-family:"MS-PMincho","Hiragino Mincho Pro","HiraMinProN-W3","ＭＳ Ｐ明朝","ヒラギノ明朝 Pro W3"!important;
}
.italic{
font-style:italic;
}

.fontsize11{font-size:11px;}
.fontsize12{font-size:12px;}
.fontsize13{font-size:13px;}
.fontsize14{font-size:14px;}
.fontsize15{font-size:15px;}
.fontsize16{font-size:16px;}
.fontsize17{font-size:17px;}
.fontsize18{font-size:18px;}
.fontsize19{font-size:19px;}
.fontsize20{font-size:20px;}
.fontsize21{font-size:21px;}
.fontsize22{font-size:22px;}
.fontsize23{font-size:23px;}
.fontsize24{font-size:24px;}
.fontsize25{font-size:25px;}
.fontsize26{font-size:26px;}
.fontsize27{font-size:27px;}
.fontsize28{font-size:28px;}
.fontsize29{font-size:29px;}
.fontsize30{font-size:30px;}

.colorc8b4b4{color:#c8b4b4;}
.colorff0000{color:#ff0000;}
.colorfff{color:#ffffff;}
.colorccc{color:#ccc;}
.coloraaa{color:#aaa;}
.color999{color:#999999;}
.color777{color:#777777;}
.color555{color:#555555;}
.color333{color:#333333;}
.color000{color:#000000;}

.fontB{font-weight:bold;}

.txtalign-L{text-align:left!important;}
.txtalign-C{text-align:center!important;}
.txtalign-R{text-align:right!important;}

.floatL{
float:left;
}
.floatR{
float:right;
}


/* スタイルクリア */
input,button,textarea,select{
-webkit-appearance:none;
border-radius:0;
outline:0;
}
input[type="text"],
textarea{
-webkit-user-select:auto;
}
ol,ul{
display:block;
list-style-type:none;
}

img{
width:100%;
height:auto;
vertical-align:bottom;
}

.dispnone{
display:none;
width:0;
height:0;
font-size:0;
}

a{
-webkit-transition:all 0.25s linear;
-moz-transition:all 0.25s linear;
-o-transition:all 0.25s linear;
-ms-transition:all 0.25s linear;
transition:all 0.25s linear;
}



/* style
= = = = = = = = = = = = =*/

#bobyWholeWrap{
overflow:hidden;
position:relative;
}

/* preloader */
#preLoad{
position:fixed;
width:100%;
height:100%;
top:0;right:0;bottom:0;left:0;
text-align:center;
z-index:99999;
background:#fff;
}
.preLoad-in{
position:relative;
top:50%;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-o-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
}
.loaderwrap{
display:inline-block;
}
.loaderwrap img{
width:60px;
height:60px;
}



.pagetopBtn{
display:block;
width:50px;
height:50px;
font-size:20px;
background:rgba(0,0,0,0.35);
-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%;border-radius:50%;
position:fixed;
bottom:10px;
right:10px;
line-height:50px;
text-align:center;
z-index:10;
cursor:pointer;
color:rgba(255,255,255,0.35);
-webkit-transition:all 0.25s linear;
-moz-transition:all 0.25s linear;
-o-transition:all 0.25s linear;
-ms-transition:all 0.25s linear;
transition:all 0.25s linear;
}
.pagetopBtn a{
color:rgba(255,255,255,255.85);
display:block;
width:50px;
height:50px;
-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%;border-radius:50%;
line-height:50px;
}
.pagetopBtn:hover{
color:rgba(255,255,255,1);
background:rgba(0,0,0,1);
}
.pagetopBtn:hover a,
.pagetopBtn a:hover{
color:rgba(255,255,255,1);
}



.topArea{
width:100%;
margin:0 auto;
}
.topArea .l,
.topArea .r{
width:50%;
position:relative;
padding-top:50%;
}
.topArea .l{
float:left;
margin:2% auto 4%;
}
.topArea .r{
float:right;
/*max-width:1000px;*/
}
.topArea .l h1,
.topArea .r span{
display:block;
position:absolute;
top:0;
left:0;
width:100% !important;
height:100% !important;
overflow:hidden;	
}
.topArea .l h1{
background:transparent url(/img/frame/t-logo.svg?1) center center no-repeat;
-webkit-background-size:50% auto;
-moz-background-size:50% auto;
-o-background-size:50% auto;
-ms-background-size:50% auto;
background-size:50% auto;
text-indent:-9999px;
}
@media(max-width:1280px){
	.topArea .l h1{
	background:transparent url(/img/frame/t-logo.svg?1) center center no-repeat;
	-webkit-background-size:60% auto;
	-moz-background-size:60% auto;
	-o-background-size:60% auto;
	-ms-background-size:60% auto;
	background-size:60% auto;
	}
}
@media(max-width:750px){
	.topArea .l h1{
	background:transparent url(/img/frame/t-logo.svg?1) center center no-repeat;
	-webkit-background-size:70% auto;
	-moz-background-size:70% auto;
	-o-background-size:70% auto;
	-ms-background-size:70% auto;
	background-size:70% auto;
	}
}
.topArea .r span{
background:transparent url(/img/frame/1.jpg) center top no-repeat;
-webkit-background-size:100% auto;
-moz-background-size:100% auto;
-o-background-size:100% auto;
-ms-background-size:100% auto;
background-size:100% auto;
}
.area2{
width:100%;
margin:0 auto;
}



.area2 .cnt1,
.area2 .cnt2,
.area2 .cnt3,
.area2 .cnt4,
.area2 .cnt5,
.area2 .cnt6,
.area2 .cnt7,
.area2 .cnt8{
position:relative;
width:100%;
padding-top:30%;
overflow:hidden;
}
.area2 p{
position:absolute;
top:25%;
left:10%;
width:80%;
height:auto;
text-align:center;
z-index:1;
font-size:8px;
}
.area2 span.bgimg,
.area2 span.txt,
.area2 .cnt7 span,
.area2 .cnt8 span{
display:block;
position:absolute;
top:0;
left:0;
width:100%!important;
height:100%!important;
}
.area2 span.bgimg{
z-index:2;
}
.area2 span.txt{
z-index:3;
}
.area2 span.bgimg{
-webkit-background-size:auto 100%;
-moz-background-size:auto 100%;
-o-background-size:auto 100%;
-ms-background-size:auto 100%;
background-size:auto 100%;
background-repeat:no-repeat;
}
.area2 span.txt{
background-color:transparent;
background-repeat:no-repeat;
-webkit-background-size:45% auto;
-moz-background-size:45% auto;
-o-background-size:45% auto;
-ms-background-size:45% auto;
background-size:45% auto;
}


.area2 .cnt1{
background:#263c6b;
}
.area2 .cnt1 span.bgimg{
background-color:#263c6b;
background-image:url(/img/frame/2.jpg);
background-position:left top;
}
.area2 .cnt1 span.txt{
background-image:url(/img/frame/2-txt.png);
background-position:right center;
}

.area2 .cnt2{
background:#cebbad;
}
.area2 .cnt2 span.bgimg{
background-color:#cebbad;
background-image:url(/img/frame/3.jpg);
background-position:right top;
}
.area2 .cnt2 span.txt{
background-image:url(/img/frame/3-txt.png);
background-position:left center;
}

.area2 .cnt3{
background:#024245;
}
.area2 .cnt3 span.bgimg{
background-color:#024245;
background-image:url(/img/frame/4.jpg);
background-position:left top;
}
.area2 .cnt3 span.txt{
background-image:url(/img/frame/4-txt.png);
background-position:right center;
}

.area2 .cnt4{
background:#82283d;
}
.area2 .cnt4 span.bgimg{
background-color:#82283d;
background-image:url(/img/frame/5.jpg);
background-position:right top;
}
.area2 .cnt4 span.txt{
background-image:url(/img/frame/5-txt.png);
background-position:left center;
}

.area2 .cnt5{
background:#1a1a2e;
}
.area2 .cnt5 span.bgimg{
background-color:#1a1a2e;
background-image:url(/img/frame/6.jpg);
background-position:left top;
}
.area2 .cnt5 span.txt{
background-image:url(/img/frame/6-txt.png);
background-position:right center;
}

.area2 .cnt6{
background:#4a3e3d;
}
.area2 .cnt6 span.bgimg{
background-color:#4a3e3d;
background-image:url(/img/frame/7.jpg);
background-position:right top;
}
.area2 .cnt6 span.txt{
background-image:url(/img/frame/7-txt.png);
background-position:left center;
}


@media(max-width:2000px){
	.area2 span.txt{
	-webkit-background-size:50% auto;
	-moz-background-size:50% auto;
	-o-background-size:50% auto;
	-ms-background-size:50% auto;
	background-size:50% auto;
	}
}
@media(max-width:1800px){
	.area2 span.txt{
	-webkit-background-size:55% auto;
	-moz-background-size:55% auto;
	-o-background-size:55% auto;
	-ms-background-size:55% auto;
	background-size:55% auto;
	}
}
@media(max-width:1280px){
	.area2 span.txt{
	-webkit-background-size:60% auto;
	-moz-background-size:60% auto;
	-o-background-size:60% auto;
	-ms-background-size:60% auto;
	background-size:60% auto;
	}
}
@media(max-width:980px){
	.area2 span.txt{
	-webkit-background-size:65% auto;
	-moz-background-size:65% auto;
	-o-background-size:65% auto;
	-ms-background-size:65% auto;
	background-size:65% auto;
	}
}
@media(max-width:750px){
	.area2 span.txt{
	-webkit-background-size:75% auto;
	-moz-background-size:75% auto;
	-o-background-size:75% auto;
	-ms-background-size:75% auto;
	background-size:75% auto;
	}
}
@media(max-width:500px){
	.area2 span.txt{
	-webkit-background-size:80% auto;
	-moz-background-size:80% auto;
	-o-background-size:80% auto;
	-ms-background-size:80% auto;
	background-size:80% auto;
	}
}


.area2 .cnt7 h2{
text-indent:-9999px;
}
.area2 .cnt7 span{
background-color:transparent;
background-image:url(/img/frame/f-logo_A.svg?4);
background-position:center center;
background-repeat:no-repeat;
-webkit-background-size:21.5% auto;
-moz-background-size:21.5% auto;
-o-background-size:21.5% auto;
-ms-background-size:21.5% auto;
background-size:21.5% auto;
}
.area2 .cnt8{
margin-top:-22%;
}
.area2 .cnt8 span{
background-color:transparent;
background-image:url(/img/frame/f-logo_A2.svg?1);
background-position:center center;
background-repeat:no-repeat;
-webkit-background-size:21.5% auto;
-moz-background-size:21.5% auto;
-o-background-size:21.5% auto;
-ms-background-size:21.5% auto;
background-size:21.5% auto;
}
@media(max-width:1280px){
	.area2 .cnt7 span,
	.area2 .cnt8 span{
	-webkit-background-size:28% auto;
	-moz-background-size:28% auto;
	-o-background-size:28% auto;
	-ms-background-size:28% auto;
	background-size:28% auto;
	}
}
@media(max-width:750px){
	.area2 .cnt7 span,
	.area2 .cnt8 span{
	-webkit-background-size:35% auto;
	-moz-background-size:35% auto;
	-o-background-size:35% auto;
	-ms-background-size:35% auto;
	background-size:35% auto;
	}
}