@charset "utf-8";
/* default.css */
@import url('https://fonts.googleapis.com/css?family=Noto+Serif');
@import url('https://fonts.googleapis.com/css?family=Lateef');
@import url('https://fonts.googleapis.com/css?family=Cardo');
@import url('https://fonts.googleapis.com/css?family=Cinzel');
@import url('https://fonts.googleapis.com/css?family=Racing+Sans+One');
@import url("reset.css");
@import url("layout.css");
@import url("contents.css");
/*==========================================================
共通クラス
==========================================================*/
/*解除*/
.clearfix:after {
content:" ";
display:block;
clear:both;
}
/* padding、borderの幅をwidthに含めない */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*マウスオーバー*/
a img:hover {
transition: 0.7s ;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7 ;
}
/*フォーム文字*/
input , select , textarea , button{
box-sizing: border-box;
font-size: 100%;
font-family: inherit;
}
/*マージン・余白*/
.ma0 { margin:0!important; } .mt0 { margin-top:0!important; } .mr0 { margin-right:0!important; } .mb0 { margin-bottom:0!important; } .ml0 { margin-left:0!important; }
.ma1 { margin:1px!important; } .mt1 { margin-top:1px!important; } .mr1 { margin-right:1px!important; } .mb1 { margin-bottom:1px!important; } .ml1 { margin-left:1px!important; }
.ma2 { margin:2px!important; } .mt2 { margin-top:2px!important; } .mr2 { margin-right:2px!important; } .mb2 { margin-bottom:2px!important; } .ml2 { margin-left:2px!important; }
.ma3 { margin:3px!important; } .mt3 { margin-top:3px!important; } .mr3 { margin-right:3px!important; } .mb3 { margin-bottom:3px!important; } .ml3 { margin-left:3px!important; }
.ma4 { margin:4px!important; } .mt4 { margin-top:4px!important; } .mr4 { margin-right:4px!important; } .mb4 { margin-bottom:4px!important; } .ml4 { margin-left:4px!important; }
.ma5 { margin:5px!important; } .mt5 { margin-top:5px!important; } .mr5 { margin-right:5px!important; } .mb5 { margin-bottom:5px!important; } .ml5 { margin-left:5px!important; }
.ma6 { margin:6px!important; } .mt6 { margin-top:6px!important; } .mr6 { margin-right:6px!important; } .mb6 { margin-bottom:6px!important; } .ml6 { margin-left:6px!important; }
.ma7 { margin:7px!important; } .mt7 { margin-top:7px!important; } .mr7 { margin-right:7px!important; } .mb7 { margin-bottom:7px!important; } .ml7 { margin-left:7px!important; }
.ma8 { margin:8px!important; } .mt8 { margin-top:8px!important; } .mr8 { margin-right:8px!important; } .mb8 { margin-bottom:8px!important; } .ml8 { margin-left:8px!important; }
.ma9 { margin:9px!important; } .mt9 { margin-top:9px!important; } .mr9 { margin-right:9px!important; } .mb9 { margin-bottom:9px!important; } .ml9 { margin-left:9px!important; }
.ma10 { margin:10px!important; } .mt10 { margin-top:10px!important; } .mr10 { margin-right:10px!important; } .mb10 { margin-bottom:10px!important; } .ml10 { margin-left:10px!important; }
.ma15 { margin:15px!important; } .mt15 { margin-top:15px!important; } .mr15 { margin-right:15px!important; } .mb15 { margin-bottom:15px!important; } .ml15 { margin-left:15px!important; }
.ma20 { margin:20px!important; } .mt20 { margin-top:20px!important; } .mr20 { margin-right:20px!important; } .mb20 { margin-bottom:20px!important; } .ml20 { margin-left:20px!important; }
.ma25 { margin:25px!important; } .mt25 { margin-top:25px!important; } .mr25 { margin-right:25px!important; } .mb25 { margin-bottom:25px!important; } .ml25 { margin-left:25px!important; }
.ma30 { margin:30px!important; } .mt30 { margin-top:30px!important; } .mr30 { margin-right:30px!important; } .mb30 { margin-bottom:30px!important; } .ml30 { margin-left:30px!important; }
.ma35 { margin:35px!important; } .mt35 { margin-top:35px!important; } .mr35 { margin-right:35px!important; } .mb35 { margin-bottom:35px!important; } .ml35 { margin-left:35px!important; }
.ma40 { margin:40px!important; } .mt40 { margin-top:40px!important; } .mr40 { margin-right:40px!important; } .mb40 { margin-bottom:40px!important; } .ml40 { margin-left:40px!important; }
.ma45 { margin:45px!important; } .mt45 { margin-top:45px!important; } .mr45 { margin-right:45px!important; } .mb45 { margin-bottom:45px!important; } .ml45 { margin-left:45px!important; }
.ma50 { margin:50px!important; } .mt50 { margin-top:50px!important; } .mr50 { margin-right:50px!important; } .mb50 { margin-bottom:50px!important; } .ml50 { margin-left:50px!important; }
.ma60 { margin:60px!important; } .mt60 { margin-top:60px!important; } .mr60 { margin-right:60px!important; } .mb60 { margin-bottom:60px!important; } .ml60 { margin-left:60px!important; }
.ma70 { margin:70px!important; } .mt70 { margin-top:70px!important; } .mr70 { margin-right:70px!important; } .mb70 { margin-bottom:70px!important; } .ml70 { margin-left:70px!important; }
.ma80 { margin:80px!important; } .mt80 { margin-top:80px!important; } .mr80 { margin-right:80px!important; } .mb80 { margin-bottom:80px!important; } .ml80 { margin-left:80px!important; }
.ma90 { margin:90px!important; } .mt90 { margin-top:90px!important; } .mr90 { margin-right:90px!important; } .mb90 { margin-bottom:90px!important; } .ml90 { margin-left:90px!important; }
.ma100 { margin:100px!important; } .mt100 { margin-top:100px!important; } .mr100 { margin-right:100px!important; } .mb100 { margin-bottom:100px!important; } .ml100 { margin-left:100px!important; }
.pa0 { padding:0!important; } .pt0 { padding-top:0!important; } .pr0 { padding-right:0!important; } .pb0 { padding-bottom:0!important; } .pl0 { padding-left:0!important; }
.pa1 { padding:1px!important; } .pt1 { padding-top:1px!important; } .pr1 { padding-right:1px!important; } .pb1 { padding-bottom:1px!important; } .pl1 { padding-left:1px!important; }
.pa2 { padding:2px!important; } .pt2 { padding-top:2px!important; } .pr2 { padding-right:2px!important; } .pb2 { padding-bottom:2px!important; } .pl2 { padding-left:2px!important; }
.pa3 { padding:3px!important; } .pt3 { padding-top:3px!important; } .pr3 { padding-right:3px!important; } .pb3 { padding-bottom:3px!important; } .pl3 { padding-left:3px!important; }
.pa4 { padding:4px!important; } .pt4 { padding-top:4px!important; } .pr4 { padding-right:4px!important; } .pb4 { padding-bottom:4px!important; } .pl4 { padding-left:4px!important; }
.pa5 { padding:5px!important; } .pt5 { padding-top:5px!important; } .pr5 { padding-right:5px!important; } .pb5 { padding-bottom:5px!important; } .pl5 { padding-left:5px!important; }
.pa6 { padding:6px!important; } .pt6 { padding-top:6px!important; } .pr6 { padding-right:6px!important; } .pb6 { padding-bottom:6px!important; } .pl6 { padding-left:6px!important; }
.pa7 { padding:7px!important; } .pt7 { padding-top:7px!important; } .pr7 { padding-right:7px!important; } .pb7 { padding-bottom:7px!important; } .pl7 { padding-left:7px!important; }
.pa8 { padding:8px!important; } .pt8 { padding-top:8px!important; } .pr8 { padding-right:8px!important; } .pb8 { padding-bottom:8px!important; } .pl8 { padding-left:8px!important; }
.pa9 { padding:9px!important; } .pt9 { padding-top:9px!important; } .pr9 { padding-right:9px!important; } .pb9 { padding-bottom:9px!important; } .pl9 { padding-left:9px!important; }
.pa10 { padding:10px!important; } .pt10 { padding-top:10px!important; } .pr10 { padding-right:10px!important; } .pb10 { padding-bottom:10px!important; } .pl10 { padding-left:10px!important; }
.pa15 { padding:15px!important; } .pt15 { padding-top:15px!important; } .pr15 { padding-right:15px!important; } .pb15 { padding-bottom:15px!important; } .pl15 { padding-left:15px!important; }
.pa20 { padding:20px!important; } .pt20 { padding-top:20px!important; } .pr20 { padding-right:20px!important; } .pb20 { padding-bottom:20px!important; } .pl20 { padding-left:20px!important; }
.pa25 { padding:25px!important; } .pt25 { padding-top:25px!important; } .pr25 { padding-right:25px!important; } .pb25 { padding-bottom:25px!important; } .pl25 { padding-left:25px!important; }
.pa30 { padding:30px!important; } .pt30 { padding-top:30px!important; } .pr30 { padding-right:30px!important; } .pb30 { padding-bottom:30px!important; } .pl30 { padding-left:30px!important; }
.pa35 { padding:35px!important; } .pt35 { padding-top:35px!important; } .pr35 { padding-right:35px!important; } .pb35 { padding-bottom:35px!important; } .pl35 { padding-left:35px!important; }
.pa40 { padding:40px!important; } .pt40 { padding-top:40px!important; } .pr40 { padding-right:40px!important; } .pb40 { padding-bottom:40px!important; } .pl40 { padding-left:40px!important; }
.pa45 { padding:45px!important; } .pt45 { padding-top:45px!important; } .pr45 { padding-right:45px!important; } .pb45 { padding-bottom:45px!important; } .pl45 { padding-left:45px!important; }
.pa50 { padding:50px!important; } .pt50 { padding-top:50px!important; } .pr50 { padding-right:50px!important; } .pb50 { padding-bottom:50px!important; } .pl50 { padding-left:50px!important; }
.pa60 { padding:60px!important; } .pt60 { padding-top:60px!important; } .pr60 { padding-right:60px!important; } .pb60 { padding-bottom:60px!important; } .pl60 { padding-left:60px!important; }
.pa70 { padding:70px!important; } .pt70 { padding-top:70px!important; } .pr70 { padding-right:70px!important; } .pb70 { padding-bottom:70px!important; } .pl70 { padding-left:70px!important; }
.pa80 { padding:80px!important; } .pt80 { padding-top:80px!important; } .pr80 { padding-right:80px!important; } .pb80 { padding-bottom:80px!important; } .pl80 { padding-left:80px!important; }
.pa90 { padding:90px!important; } .pt90 { padding-top:90px!important; } .pr90 { padding-right:90px!important; } .pb90 { padding-bottom:90px!important; } .pl90 { padding-left:90px!important; }
.pa100 { padding:100px!important; } .pt100 { padding-top:100px!important; } .pr100 { padding-right:100px!important; } .pb100 { padding-bottom:100px!important; } .pl100 { padding-left:100px!important; }
.pa1p { padding:1%!important; } .pa2p { padding:2%!important; } .pa3p { padding:3%!important; } .pa4p { padding:4%!important; } .pa5p { padding:5%!important; }
.pa6p { padding:6%!important; } .pa7p { padding:7%!important; } .pa8p { padding:8%!important; } .pa9p { padding:9%!important; } .pa10p{ padding:10%!important; }
.pa11p{ padding:11%!important;} .pa12p{ padding:12%!important;} .pa13p{ padding:13%!important;} .pa14p{ padding:14%!important;} .pa15p{ padding:15%!important; }
.pa16p{ padding:16%!important;} .pa17p{ padding:17%!important;} .pa18p{ padding:18%!important;} .pa19p{ padding:19%!important;} .pa20p{ padding:20%!important; }
/*スマホのみマージン*/
@media only screen and ( max-width : 599px ) {/*スマホ用*/
.mbs10 { margin-bottom:10px!important; } .mbs20 { margin-bottom:20px!important; } .mbs30 { margin-bottom:30px!important; } .mbs40 { margin-bottom:40px!important; } .mbs50 { margin-bottom:50px!important; }
}
/*PCのみマージン*/
@media ( min-width : 600px ),print {/*PC用*/
.mtp10 { margin-top:10px!important; } .mtp20 { margin-top:20px!important; } .mtp30 { margin-top:30px!important; } .mtp40 { margin-top:40px!important; } .mtp50 { margin-top:50px!important; }
}
/*横幅PC用 %*/
@media ( min-width : 600px ),print {/*PC用*/
.w100p{ width:100% !important; }
.w95p{ width:95% !important; }.w90p{ width:90% !important; }
.w85p{ width:85% !important; }.w80p{ width:80% !important; }
.w75p{ width:75% !important; }.w70p{ width:70% !important; }
.w65p{ width:65% !important; }.w60p{ width:60% !important; }
.w55p{ width:55% !important; }.w50p{ width:50% !important; }
.w45p{ width:45% !important; }.w40p{ width:40% !important; }
.w35p{ width:35% !important; }.w30p{ width:30% !important; }
.w25p{ width:25% !important; }.w20p{ width:20% !important; }
.w15p{ width:15% !important; }.w10p{ width:10% !important; }
.w5p{ width:5% !important; }
/*固定*/
.w10{ width:10px !important; }.w20{ width:20px !important; }.w30{ width:30px !important; }.w40{ width:40px !important; }.w50{ width:50px !important; }.w60{ width:60px !important; }.w70{ width:70px !important; }.w80{ width:80px !important; }.w90{ width:90px !important; }.w100{ width:100px !important; }
.w110{ width:110px !important; }.w120{ width:120px !important; }.w130{ width:130px !important; }.w140{ width:140px !important; }.w150{ width:150px !important; }.w160{ width:160px !important; }.w170{ width:170px !important; }.w180{ width:180px !important; }.w190{ width:190px !important; }.w200{ width:200px !important; }
.w210{ width:210px !important; }.w220{ width:220px !important; }.w230{ width:230px !important; }.w240{ width:240px !important; }.w250{ width:250px !important; }.w260{ width:260px !important; }.w270{ width:270px !important; }.w280{ width:280px !important; }.w290{ width:290px !important; }.w300{ width:300px !important; }
.w310{ width:310px !important; }.w320{ width:320px !important; }.w330{ width:330px !important; }.w340{ width:340px !important; }.w350{ width:350px !important; }.w360{ width:360px !important; }.w370{ width:370px !important; }.w380{ width:380px !important; }.w390{ width:390px !important; }.w400{ width:400px !important; }
.w410{ width:410px !important; }.w420{ width:420px !important; }.w430{ width:430px !important; }.w440{ width:440px !important; }.w450{ width:450px !important; }.w460{ width:460px !important; }.w470{ width:470px !important; }.w480{ width:480px !important; }.w490{ width:490px !important; }.w500{ width:500px !important; }
.w510{ width:510px !important; }.w520{ width:520px !important; }.w530{ width:530px !important; }.w540{ width:540px !important; }.w550{ width:550px !important; }.w560{ width:560px !important; }.w570{ width:570px !important; }.w580{ width:580px !important; }.w590{ width:590px !important; }.w600{ width:600px !important; }
.w610{ width:610px !important; }.w620{ width:620px !important; }.w630{ width:630px !important; }.w640{ width:640px !important; }.w650{ width:650px !important; }.w660{ width:660px !important; }.w670{ width:670px !important; }.w680{ width:680px !important; }.w690{ width:690px !important; }.w700{ width:700px !important; }
.w710{ width:710px !important; }.w720{ width:720px !important; }.w730{ width:730px !important; }.w740{ width:740px !important; }.w750{ width:750px !important; }.w760{ width:760px !important; }.w770{ width:770px !important; }.w780{ width:780px !important; }.w790{ width:790px !important; }.w800{ width:800px !important; }
.w810{ width:810px !important; }.w820{ width:820px !important; }.w830{ width:830px !important; }.w840{ width:840px !important; }.w850{ width:750px !important; }.w860{ width:760px !important; }.w870{ width:870px !important; }.w880{ width:880px !important; }.w890{ width:890px !important; }.w900{ width:900px !important; }
.w910{ width:910px !important; }.w920{ width:920px !important; }.w930{ width:930px !important; }.w940{ width:940px !important; }.w950{ width:750px !important; }.w960{ width:760px !important; }.w970{ width:970px !important; }.w980{ width:980px !important; }.w990{ width:990px !important; }.w1000{ width:1000px !important; }
}
/*高さ*/
.h100p{ height:100% }.h90p{ height:90% }.h80p{ height:80% }.h70p{ height:70% }.h60p{ height:60% }.h50p{ height:50% }.h40p{ height:40% }.h30p{ height:30% }.h20p{ height:20% }.h10p{ height:10% }
.h10{ height:10px !important; }.h20{ height:20px !important; }.h30{ height:30px !important; }.h40{ height:40px !important; }.h50{ height:50px !important; }.h60{ height:60px !important; }.h70{ height:70px !important; }.h80{ height:80px !important; }.h90{ height:90px !important; }.h100{ height:100px !important; }
.h110{ height:110px !important; }.h120{ height:120px !important; }.h130{ height:130px !important; }.h140{ height:140px !important; }.h150{ height:150px !important; }.h160{ height:160px !important; }.h170{ height:170px !important; }.h180{ height:180px !important; }.h190{ height:190px !important; }.h200{ height:200px !important; }
.h210{ height:210px !important; }.h220{ height:220px !important; }.h230{ height:230px !important; }.h240{ height:240px !important; }.h250{ height:250px !important; }.h260{ height:260px !important; }.h270{ height:270px !important; }.h280{ height:280px !important; }.h290{ height:290px !important; }.h300{ height:300px !important; }
.h310{ height:310px !important; }.h320{ height:320px !important; }.h330{ height:330px !important; }.h340{ height:340px !important; }.h350{ height:350px !important; }.h360{ height:360px !important; }.h370{ height:370px !important; }.h380{ height:380px !important; }.h390{ height:390px !important; }.h400{ height:400px !important; }
.h410{ height:410px !important; }.h420{ height:420px !important; }.h430{ height:430px !important; }.h440{ height:440px !important; }.h450{ height:450px !important; }.h460{ height:460px !important; }.h470{ height:470px !important; }.h480{ height:480px !important; }.h490{ height:490px !important; }.h500{ height:500px !important; }
.h510{ height:510px !important; }.h520{ height:520px !important; }.h530{ height:530px !important; }.h540{ height:540px !important; }.h550{ height:550px !important; }.h560{ height:560px !important; }.h570{ height:570px !important; }.h580{ height:580px !important; }.h590{ height:590px !important; }.h600{ height:600px !important; }
.h610{ height:610px !important; }.h620{ height:620px !important; }.h630{ height:630px !important; }.h640{ height:640px !important; }.h650{ height:650px !important; }.h660{ height:660px !important; }.h670{ height:670px !important; }.h680{ height:680px !important; }.h690{ height:690px !important; }.h700{ height:700px !important; }
.h710{ height:710px !important; }.h720{ height:720px !important; }.h730{ height:730px !important; }.h740{ height:740px !important; }.h750{ height:750px !important; }.h760{ height:760px !important; }.h770{ height:770px !important; }.h780{ height:780px !important; }.h790{ height:790px !important; }.h800{ height:800px !important; }
.h810{ height:810px !important; }.h820{ height:820px !important; }.h830{ height:830px !important; }.h840{ height:840px !important; }.h850{ height:850px !important; }.h860{ height:860px !important; }.h870{ height:870px !important; }.h880{ height:880px !important; }.h890{ height:890px !important; }.h900{ height:900px !important; }
.h910{ height:910px !important; }.h920{ height:920px !important; }.h930{ height:930px !important; }.h940{ height:940px !important; }.h950{ height:950px !important; }.h960{ height:960px !important; }.h970{ height:970px !important; }.h980{ height:980px !important; }.h990{ height:990px !important; }.h1000{ height:1000px !important; }
/*フォントサイズ*/
.fs10{ font-size: 10px!important; font-size: 1rem !important; }.fs11{ font-size: 11px!important; font-size: 1.1rem!important; }
.fs12{ font-size: 12px!important; font-size: 1.2rem!important; }.fs13{ font-size: 13px!important; font-size: 1.3rem!important; }
.fs14{ font-size: 14px!important; font-size: 1.4rem!important; }.fs15{ font-size: 15px!important; font-size: 1.5rem!important; }
.fs16{ font-size: 16px!important; font-size: 1.6rem!important; }.fs17{ font-size: 17px!important; font-size: 1.7rem!important; }
.fs18{ font-size: 18px!important; font-size: 1.8rem!important; }.fs19{ font-size: 19px!important; font-size: 1.9rem!important; }
.fs20{ font-size: 20px!important; font-size: 2rem !important; }.fs22{ font-size: 22px!important; font-size: 2.2rem!important; }
.fs23{ font-size: 23px!important; font-size: 2.3rem!important; }.fs24{ font-size: 24px!important; font-size: 2.4rem!important; }
.fs25{ font-size: 25px!important; font-size: 2.5rem!important; }.fs26{ font-size: 26px!important; font-size: 2.6rem!important; }
.fs27{ font-size: 27px!important; font-size: 2.7rem!important; }.fs28{ font-size: 28px!important; font-size: 2.8rem!important; }
.fs29{ font-size: 29px!important; font-size: 2.9rem!important; }.fs30{ font-size: 30px!important; font-size: 3rem !important; }
.fs31{ font-size: 31px!important; font-size: 3.1rem!important; }.fs32{ font-size: 32px!important; font-size: 3.2rem!important; }
.fs33{ font-size: 33px!important; font-size: 3.3rem!important; }.fs34{ font-size: 34px!important; font-size: 3.4rem!important; }
.fs35{ font-size: 35px!important; font-size: 3.5rem!important; }.fs36{ font-size: 36px!important; font-size: 3.6rem!important; }
.fs37{ font-size: 37px!important; font-size: 3.7rem!important; }.fs38{ font-size: 38px!important; font-size: 3.8rem!important; }
.fs39{ font-size: 39px!important; font-size: 3.9rem!important; }.fs40{ font-size: 40px!important; font-size: 40rem !important; }
/*フォント強弱*/
.big{ font-size: 120%;}
.small{ font-size: 80%;}
.container em{
font-style:normal;
font-size: 120%;
}
/*行高さ*/
.line-h08{line-height: 0.8em!important;}
.line-h09{line-height: 0.9em!important;}
.line-h10{line-height: 1.0em!important;}
.line-h11{line-height: 1.1em!important;}
.line-h12{line-height: 1.2em!important;}
.line-h13{line-height: 1.3em!important;}
.line-h14{line-height: 1.4em!important;}
.line-h15{line-height: 1.5em!important;}
.line-h16{line-height: 1.6em!important;}
.line-h17{line-height: 1.7em!important;}
.line-h18{line-height: 1.8em!important;}
.line-h19{line-height: 1.9em!important;}
.line-h20{line-height: 2.0em!important;}
.line-h22{line-height: 2.2em!important;}
.line-h23{line-height: 2.3em!important;}
.line-h24{line-height: 2.4em!important;}
.line-h25{line-height: 2.5em!important;}
.line-h30{line-height: 3em!important;}
/*フォントカラー*/
.fc-white { color: #fff;}
.fc-black { color: #000;}
.fc-grey { color: #6e6e6e;}
.fc-red { color: #b42c2c;}
.fc-red2 { color: #8e3c3c;}
.fc-green { color: #085e29;}
.fc-brown { color: #8d6000;}
.fc-blue { color: #2e3f73;}
.fc-purple { color: #a05ba9;}
.fc-yellow { color: #fff373;}
.fc-accent { color: #bd0000; font-weight: bold; }
/*画像*/
img { vertical-align:bottom; border:none; line-height: 0; }
img.mid { vertical-align:middle; }
img.fit { width:100%; max-width:100%; height:auto; width /***/:auto; }
img.max { width:100%; height:auto; width /***/:auto; }
/*行揃え*/
.tc{ text-align:center !important;}
.tl{ text-align:left !important;}
.tr{ text-align:right !important;}
.mc{ margin: 0 auto !important;}
.tcpc{ text-align:center !important;}/*PCのみ中央*/
.tcsm{ text-align:left !important;}/*スマホのみ中央*/
@media only screen and ( max-width : 599px ) {/*スマホ用*/
.tcpc{ text-align:left !important;}
.tcsm{ text-align:center !important;}/*スマホのみ中央*/
}
/*フォントファミリー*/
@font-face {
font-family: "webHanSerif";
src: url("/common/font/webHanSerif.woff2") format('woff2'),
url("/common/font/webHanSerif.woff") format('woff');
}
.serif { font-family: "webHanSerif","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HGS明朝E","ＭＳ Ｐ明朝",serif; font-weight: normal; }
.sans { font-family: "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif; }
.sans2 { font-family: 'Noto Sans Japanese', sans-serif; }
.eng{ font-family: 'Cardo', serif !important; }
.eng2{ font-family: 'Cinzel', serif !important; letter-spacing:0.1em;}
.bold{ font-weight: bold; }
.ftype1{ font-family: 'Cinzel', serif; font-weight:normal; !important;}
.ftype2{ font-family: 'Cormorant SC', serif; font-weight:normal; !important;}
.ftype3{ font-family: 'Pinyon Script', cursive; !important;}
.ftype4{ font-family: 'Racing Sans One', cursive !important;}
/*メートル機種依存文字m2*/
span.sup{
vertical-align: super;
font-size: 80%;
}
/*背景カラー モノクロ＋薄い*/
.bg-black { background: #000000; }
.bg-white { background: #ffffff; }
.bg-grey { background: #f7f7f7; }
.bg-grey2 { background: #ededed; }
.bg-beige { background: #f7f5f1; }
.bg-beige2{ background: #e5ddcb; }
.bg-blue { background: #f6f6f9; }
.bg-blue2 { background: #eff3fb; }
.bg-green { background: #f0f6f1; }
.bg-pink { background: #fdf4f4; }
.bg-yellow{ background: #fbfae6; }
/*背景カラー 濃い*/
.bgd-grey { background: #6f6f6f; }
.bgd-beige { background: #E7D0A9; }
.bgd-blue { background: #80acd6; }
.bgd-red { background: #db7676; }
.bgd-green { background: #92d680; }
.bgd-pink { background: #ff99c4; }
.bgd-yellow{ background: #feea7c; }
/*背景カラー 横グラデ*/
.bgw-beige-r{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 30%, #f7f5f1 30%, #f7f5f1 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ffffff 0%,#ffffff 30%,#f7f5f1 30%,#f7f5f1 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ffffff 0%,#ffffff 30%,#f7f5f1 30%,#f7f5f1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bgw-beige-l{
background: #f7f5f1; /* Old browsers */
background: -moz-linear-gradient(left, #f7f5f1 0%, #f7f5f1 70%, #f7f5f1 70%, #ffffff 70%, #ffffff 70%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #f7f5f1 0%,#f7f5f1 70%,#f7f5f1 70%,#ffffff 70%,#ffffff 70%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #f7f5f1 0%,#f7f5f1 70%,#f7f5f1 70%,#ffffff 70%,#ffffff 70%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
@media only screen and ( max-width : 599px ) {/*スマホ用*/
.bgw-beige-r,
.bgw-beige-l{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 30%, #ffffff 30%, #f7f5f1 30%, #f7f5f1 30%, #f7f5f1 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 30%,#ffffff 30%,#f7f5f1 30%,#f7f5f1 30%,#f7f5f1 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 30%,#ffffff 30%,#f7f5f1 30%,#f7f5f1 30%,#f7f5f1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
}
.bgw-green-r{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 30%, #dfead9 30%, #dfead9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ffffff 0%,#ffffff 30%,#dfead9 30%,#dfead9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ffffff 0%,#ffffff 30%,#dfead9 30%,#dfead9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bgw-green-l{
background: #dfead9; /* Old browsers */
background: -moz-linear-gradient(left, #dfead9 0%, #dfead9 70%, #dfead9 70%, #ffffff 70%, #ffffff 70%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #dfead9 0%,#dfead9 70%,#dfead9 70%,#ffffff 70%,#ffffff 70%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #dfead9 0%,#dfead9 70%,#dfead9 70%,#ffffff 70%,#ffffff 70%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
@media only screen and ( max-width : 599px ) {/*スマホ用*/
.bgw-green-r,
.bgw-green-l{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 30%, #ffffff 30%, #dfead9 30%, #dfead9 30%, #dfead9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 30%,#ffffff 30%,#dfead9 30%,#dfead9 30%,#dfead9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 30%,#ffffff 30%,#dfead9 30%,#dfead9 30%,#dfead9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
}
.bgw-blue-r{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 30%, #e1edf0 30%, #e1edf0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ffffff 0%,#ffffff 30%,#e1edf0 30%,#e1edf0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ffffff 0%,#ffffff 30%,#e1edf0 30%,#e1edf0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bgw-blue-l{
background: #e1edf0; /* Old browsers */
background: -moz-linear-gradient(left, #e1edf0 0%, #e1edf0 70%, #e1edf0 70%, #ffffff 70%, #ffffff 70%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #e1edf0 0%,#e1edf0 70%,#e1edf0 70%,#ffffff 70%,#ffffff 70%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #e1edf0 0%,#e1edf0 70%,#e1edf0 70%,#ffffff 70%,#ffffff 70%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
@media only screen and ( max-width : 599px ) {/*スマホ用*/
.bgw-blue-r,
.bgw-blue-l{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 30%, #ffffff 30%, #e1edf0 30%, #e1edf0 30%, #e1edf0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 30%,#ffffff 30%,#e1edf0 30%,#e1edf0 30%,#e1edf0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 30%,#ffffff 30%,#e1edf0 30%,#e1edf0 30%,#e1edf0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
}
/*背景カラー 縦グラデ*/
.bgv_green { background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.0) 50px, rgba(163,197,151,0.3) 50px, rgba(163,197,151,0.3) 100%); }
.bgv_brown { background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.0) 50px, rgba(246,241,231,0.9) 50px, rgba(246,241,231,0.9) 100%); }
.bgv_brown2 { background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.0) 50px, rgba(226,221,211,0.9) 50px, rgba(226,221,211,0.9) 100%); }
.bgv_darkbrown { background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.0) 50px, rgba(42,30,18,0.9) 50px, rgba(42,30,18,0.9) 100%); }
@media only screen and ( max-width : 599px ) {/*スマホ用*/
.bgv_green { background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.0) 80px, rgba(163,197,151,0.3) 80px, rgba(163,197,151,0.3) 100%); }
.bgv_darkbrown { background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.0) 80px, rgba(42,30,18,0.9) 80px, rgba(42,30,18,0.9) 100%); }
}
/*背景 その他*/
.bg-type01 { background:url(../img/bg_type01.jpg) no-repeat center top; background-size: cover; }
.bg-type02 {
background:url(../img/bg_greenleather.jpg) repeat center top;
border-top: solid 8px #7e5f00;
border-bottom: solid 8px #7e5f00;
padding: 20px 0;
}
/*背景パターン*/
.bg-pattern1{
background-image:
linear-gradient(160deg, rgba(0, 0, 0, 0.02) 25%, transparent 25%),
linear-gradient(250deg, rgba(0, 0, 0, 0.02) 25%, transparent 25%),
linear-gradient(70deg, rgba(0, 0, 0, 0.02) 25%, transparent 25%),
linear-gradient(340deg, rgba(0, 0, 0, 0.02) 25%, transparent 25%);
background-size: 100% 100%;
background-repeat: repeat;
}
.bg-pattern1-beige{
background-color: #faf8f4;
background-image:
linear-gradient(160deg, rgba(0, 0, 0, 0.02) 25%, transparent 25%),
linear-gradient(250deg, rgba(0, 0, 0, 0.02) 25%, transparent 25%),
linear-gradient(70deg, rgba(0, 0, 0, 0.02) 25%, transparent 25%),
linear-gradient(340deg, rgba(0, 0, 0, 0.02) 25%, transparent 25%);
background-size: 100% 100%;
background-repeat: repeat;
}
.bg-pattern1-grey {
background-color: #fefefe;
background-image:
linear-gradient(160deg, rgba(0, 0, 0, 0.02) 25%, transparent 25%),
linear-gradient(250deg, rgba(0, 0, 0, 0.02) 25%, transparent 25%),
linear-gradient(70deg, rgba(0, 0, 0, 0.02) 25%, transparent 25%),
linear-gradient(340deg, rgba(0, 0, 0, 0.02) 25%, transparent 25%);
background-size: 100% 100%;
background-repeat: repeat;
}
.bg-pattern2 {
background:
radial-gradient(100% 225% at 100% 0%, #F3F0EA 0%, #999999 100%), /* ごく淡いベージュ→やや濃いグレー */
linear-gradient(255deg, #E1DED6 0%, #999999 100%), /* グレーベージュ→やや濃いグレー */
linear-gradient(40deg, #B0B0B0 0%, #B0B0B0 30%, #C0C0C0 calc(30% + 1px), #C0C0C0 35%, #D0D0D0 calc(35% + 1px), #D0D0D0 50%, #E5E2DD calc(50% + 1px), #E5E2DD 100%), /* モノトーン階調（少し濃く） */
linear-gradient(140deg, #BBBBBB 0%, #BBBBBB 40%, #CCCCBB calc(40% + 1px), #CCCCBB 60%, #DCD8D0 calc(60% + 1px), #DCD8D0 70%, #F3F0EA calc(70% + 1px), #F3F0EA 100%);
background-blend-mode: overlay, soft-light, overlay, normal;
}
.bg-pattern2-reverse {
background:
radial-gradient(100% 225% at 0% 0%, #F3F0EA 0%, #999999 100%), /* ごく淡いベージュ→やや濃いグレー、右上→左上へ */
linear-gradient(-255deg, #E1DED6 0%, #999999 100%), /* グレーベージュ→やや濃いグレー、反転 */
linear-gradient(-40deg, #B0B0B0 0%, #B0B0B0 30%, #C0C0C0 calc(30% + 1px), #C0C0C0 35%, #D0D0D0 calc(35% + 1px), #D0D0D0 50%, #E5E2DD calc(50% + 1px), #E5E2DD 100%), /* モノトーン階調（左右反転） */
linear-gradient(-140deg, #BBBBBB 0%, #BBBBBB 40%, #CCCCBB calc(40% + 1px), #CCCCBB 60%, #DCD8D0 calc(60% + 1px), #DCD8D0 70%, #F3F0EA calc(70% + 1px), #F3F0EA 100%);
background-blend-mode: overlay, soft-light, overlay, normal;
}
/*ボーダー*/
.border_grey1{ border: solid 1px #e4e4e4; }
.border_grey2{ border: solid 2px #e4e4e4; }
.border_brown1{ border: solid 1px #ddd0c2; }
/*ボックスシャドウ*/
.shadow01{
box-shadow: 1px 1px 2px #ccc;
}
/*装飾枠*/
.kazaribox01{
position: relative;
background: #fbf7ef;
box-shadow: 0px 0px 0px 5px #f7f2e7;
border: dashed 2px white;
padding: 30px 100px;
color: #454545;
}
.kazaribox01:after{
position: absolute;
content: '';
right: -7px;
top: -7px;
border-width: 0 15px 15px 0;
border-style: solid;
border-color: #eae2d2 #fff #eae2d2;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
@media only screen and ( max-width : 599px ) {/*スマホ用*/
.kazaribox01{
padding: 30px 20px;
}
}
/*リスト*/
ul.listtext li{
padding-left: 1.0em;
text-indent: -1.0em;
line-height: 1.5;
margin-bottom: 0.4em;
}
ul.listtext li:before { content:"● "; color:#a69065 ; font-size:10px; vertical-align:1px;}
ul.listtext2 li{
padding-left: 1.0em;
text-indent: -1.0em;
}
ul.listtext2 li:before { content:"● "; color:#a69065 ; font-size:10px; vertical-align:1px;}
ul.listtextin li{
padding-left: 1.2em;
text-indent: -1.2em;
width: auto !important;
margin-bottom: 0px !important;
}
/*スマホでbr消す*/
@media only screen and ( max-width : 599px ) {/*スマホ用*/
.brnone br{
display: none;
}
}
/*==========================================================
ボーダー
==========================================================*/
.border_grey1{ border: solid 1px #e4e4e4; }
.border_grey2{ border: solid 2px #e4e4e4; }
.border_brown1{ border: solid 1px #ddd0c2; }
/*上下二重線*/
.border_deco01 {
position: relative;
padding: 1rem;
border-top: 7px double #e4e4e4;
border-bottom: 7px double #e4e4e4;
}
/*==========================================================
テーブル
==========================================================*/
table { border-collapse:collapse; border-spacing:0; empty-cells:show; }
table.thc th { text-align:center; }table.thl th { text-align:left; } table.thr th { text-align:right; }
table.full { width:100%; } table.half { width:50%; } table.third { width:33.33%; } table.quarter { width:25%; }
th { font-weight:normal; }
tr.nobr th, tr.nobr td, tr td.nobr, tr th.nobr{ white-space:nowrap; }
tr td.nor, tr th.nor { white-space:normal; }
tr.tc th, tr.tc td { text-align:center; }
table th.nb, table td.nb { border:none; }
table.fix { table-layout: fixed;}
/* テーブル垂直揃え */
table tr.vt th,table tr.vt td { vertical-align:top; }
table tr.vm th,table tr.vm td { vertical-align:middle; }
table.vt tr th,table.vt tr td { vertical-align:top; }
table.vm tr th,table.vm tr td { vertical-align:middle; }
/* テーブル余白 */
table.sp1 th, table.sp1 td { padding:2px 4px; }
table.sp2 th, table.sp2 td { padding:4px 6px; }
table.sp3 th, table.sp3 td { padding:6px 8px; }
table.sp4 th, table.sp4 td { padding:8px 10px; }
table.sp5 th, table.sp5 td { padding:10px 12px; }
/* テーブルボーダーパターン */
table.type1 caption { text-align:left; padding-bottom:4px; }
table.type1 th, table.type1 td { border-top:1px solid #e0dcd0; border-bottom:1px solid #e0dcd0; }
table.type2 th, table.type2 td { border:1px solid #e0dcd0; }
table.type3 th, table.type3 td { border:1px solid #d0c6b0; }
table.type4 th, table.type4 td { border-bottom:1px solid #6e644e; padding: 6px 0; }
table.type4 { border-top:1px solid #6e644e; }
table.type_rakuten th, table.type_rakuten td { border-bottom:1px solid #666b72; padding: 6px 0; }
table.type_rakuten { border-top:1px solid #666b72; }
/* テーブル背景パターン */
td.bg1, th.bg1, tr.bg1 th, tr.bg1 td { background-color:#edeae2 !important; }
td.bg2, th.bg2, tr.bg2 th, tr.bg2 td { background-color:#fcfaf5 !important; }
td.bg3, th.bg3, tr.bg3 th, tr.bg3 td { background-color:#eeeeee !important; }
td.bg4, th.bg4, tr.bg4 th, tr.bg4 td { background-color:#e7e4ec !important; }
/* テーブルスマホ縦 */
@media only screen and ( max-width : 599px ) {/*スマホ用*/
.tblock tr,
.tblock tbody,
.tblock th,
.tblock td{
display:block;
}
.tblock tr:nth-child(n + 2) th,
.tblock tr:nth-child(n + 1) td{
border-top: none;
}
/* スクロールバー表示（div で囲む） */
.table-scroll{
overflow-x: scroll;
}
}
/*テーブルセット*/
.table01{
width: 100%;
border: 0;
}
.table01 th{
vertical-align: middle;
background-color: #f4f0ec;
padding: 0.6em 1em;
border-top:1px solid #e0dcd0; border-bottom:1px solid #e0dcd0;
}
.table01 td{
vertical-align: middle;
padding: 0.6em 1em;
border-top:1px solid #e0dcd0; border-bottom:1px solid #e0dcd0;
}
/*==========================================================
dl横並び 全てdl に指定
==========================================================*/
/*例：
- ●
- ●
- ●
- ●
*/
.dlbox{
display: flex;
flex-wrap:wrap;
width: 100%;
}
/*vm 指定でdt上下中央*/
.dlbox.vmdt dt{
display: flex;
align-items: center;
justify-content:center;
text-align:center;
}
/*サイズ dt ddどっちも指定*/
.dt10 dt{ width:10%;}.dt20 dt{ width:20%;}.dt30 dt{ width:30%;}.dt40 dt{ width:40%;}.dt50 dt{ width:50%;}
.dt60 dt{ width:60%;}.dt70 dt{ width:70%;}.dt80 dt{ width:80%;}.dt90 dt{ width:90%;}.dt100 dt{ width:90%;}
.dd10 dd{ width:10%;}.dd20 dd{ width:20%;}.dd30 dd{ width:30%;}.dd40 dd{ width:40%;}.dd50 dd{ width:50%;}
.dd60 dd{ width:60%;}.dd70 dd{ width:70%;}.dd80 dd{ width:80%;}.dd90 dd{ width:90%;}.dd100 dd{ width:90%;}
.dtbold dt { font-weight: bold; }
.dlbox.sp10 dt,.dlbox.sp10 dd{ padding: 10px;}
.dlbox.sp15 dt,.dlbox.sp15 dd{ padding: 15px;}
.dlbox.sp20 dt,.dlbox.sp20 dd{ padding: 20px;}
.dlbox.sp30 dt,.dlbox.sp30 dd{ padding: 30px;}
/*-----type(border) 指定-----*/
/*上下border*/
.dlbox.type1 dt,
.dlbox.type1 dd{
border-bottom: 1px solid #e0dcd0;
}
.dlbox.type1 dt:first-child{
border-top: 1px solid #e0dcd0;
}
.dlbox.type1 dt:first-child +dd{
border-top: 1px solid #e0dcd0;
}
/*全部border*/
.dlbox.type2 dt{
border: 1px solid #e0dcd0;
border-top: none;
border-right: none;
}
.dlbox.type2 dt:first-child{
border-top: 1px solid #e0dcd0;
}
.dlbox.type2 dd{
border: 1px solid #e0dcd0;
border-top: none;
}
.dlbox.type2 dt:first-child + dd{
border-top: 1px solid #e0dcd0;
}
/*スマホで縦並びに変更 block*/
@media only screen and ( max-width : 599px ) {/*スマホ用*/
.dlbox.block dt{ width: 100%; }
.dlbox.block dd{ width: 100%; }
.dlbox.type1 dt:first-child{
border-bottom: none;
}
.dlbox.type2 dt{
border: 1px solid #e0dcd0;
border-bottom: none;
}
.dlbox.type2 dd{
border-bottom: none;
}
.dlbox.type2 dd:last-child{
border-bottom: 1px solid #e0dcd0;
}
}
/*==========================================================
Flexbox
==========================================================*/
/*flexbox 左右 画像とテキスト*/
.flex_wrap{
display: flex;
justify-content: space-between;
}
.flex_wrap img{ display: block; max-width: 100%; height: auto; }
.flex_wrap .fbig { width: 59%; }
.flex_wrap .fsmall { width: 37%; }
.flex_wrap .fbig2 { width: 65%; }
.flex_wrap .fsmall2{ width: 31%; }
.flex_wrap .fbig3 { width: 50%; }
.flex_wrap .fsmall3{ width: 46%; }
.flex_wrap .fbig4 { width: 70%; }
.flex_wrap .fsmall4{ width: 30%; }
.flex_wrap .fbig5 { width: 55%; }
.flex_wrap .fsmall5{ width: 45%; }
.flex_wrap .fbig6 { width: 70%; }
.flex_wrap .fsmall6{ width: 26%; }
.flex_wrap .fhalf { width: 50%; }
.flex_wrap .fbig_m0 { width: 60%; }
.flex_wrap .fsmall_m0{ width: 40%; }
.flex_wrap .fbig2_m0 { width: 50%; }
.flex_wrap .fsmall2_m0{ width: 50%; }
@media only screen and ( max-width : 599px ) {/*スマホ用*/
.flex_wrap{
flex-direction: column;
}
.flex_wrap .fbig,
.flex_wrap .fbig2,
.flex_wrap .fbig3,
.flex_wrap .fbig4,
.flex_wrap .fbig5,
.flex_wrap .fbig6,
.flex_wrap .fsmall,
.flex_wrap .fsmall2,
.flex_wrap .fsmall3,
.flex_wrap .fsmall4,
.flex_wrap .fsmall5,
.flex_wrap .fsmall6{ width: 100%; }
.flex_wrap .fhalf { width: 100%; }
.flex_wrap .fbig_m0,
.flex_wrap .fsmall_m0,
.flex_wrap .fbig2_m0,
.flex_wrap .fsmall2_m0{ width: 100%; }
}
/*flexbox スマホレイアウト変更なし*/
.flex_wrap2{
display: flex;
justify-content: space-between;
}
.flex_wrap2 .fbig { width: 59%; }
.flex_wrap2 .fsmall{ width: 37%; }
.flex_wrap2 .fbig_m0 { width: 60%; }
.flex_wrap2 .fsmall_m0{ width: 40%; }
.flex_wrap2 .fbig2_m0 { width: 50%; }
.flex_wrap2 .fsmall2_m0{ width: 50%; }
/*----Flexコンテナー親要素--------------------------------*/
/*Flexbox化*/
.flex{ display: flex; }
.flexin{ display: inline-flex; }/*インライン要素用*/
/*子要素の並ぶ向き*/
.fd-row { flex-direction: row; }/*初期値 左から右*/
.fd-reverse { flex-direction: row-reverse; }/*右から左*/
.fd-col { flex-direction: column; }/*上から下*/
.fd-col-reverse{ flex-direction: column-reverse; }/*下から上*/
@media only screen and ( max-width : 599px ) {/*スマホ用*/
.fd-reverse{ flex-direction:column; }/*スマホにした時に縦一列にする*/
}
/*子要素の折り返し*/
.fw-nowwrap{ flex-wrap:nowrap; }/*初期値 折り返しなし*/
.fw-wrap { flex-wrap: wrap; }/*右端で折り返し 下へ改行*/
.fw-reverse{ flex-wrap: wrap-reverse; }/*右端で折り返し 上へ改行*/
/* 水平方向の揃え */
.jc-start { justify-content: flex-start; }/*初期値 左揃え */
.jc-end { justify-content: flex-end; }/*右揃え */
.jc-center { justify-content: center; }/*中央揃え */
.jc-between { justify-content: space-between; } /*最初と最後のアイテムは端に、残りは等間隔で配置*/
.jc-baseline{ justify-content: baseline; } /* 均等に間隔をあけて左右にも半分ずつ間隔をあける */
/* 垂直方向の揃え */
.ai-stretch { align-items: stretch; }/*初期値 左揃え */
.ai-start { align-items: flex-start; }/*横並びの場合は上揃え、縦並びの場合は左揃え*/
.ai-end { align-items: flex-end; }/*横並びの場合は下揃え、縦並びの場合は右揃え*/
.ai-center { align-items: center; }/*中央揃え*/
.ai-baseline{ align-items: baseline; }/*ベースラインを揃える*/
/*複数行にした時の揃え*/
.ac-stretch{ align-content: stretch; }/*均等に配置しサイズも引き延ばす*/
.ac-start { align-content: flex-start; }/*左上揃え*/
.ac-end { align-content: flex-end; }/*下揃え*/
.ac-center { align-content: center; }/*中央に寄せる*/
.ac-between{ align-content: space-between; }/*上下端均等*/
.ac-around { align-content: space-around; }/*上下中央均等*/
/*----Flexアイテム子要素---------------------------------*/
/*子要素の垂直方向の揃え*/
.as-items { align-self: auto; }/*初期値 高さ同じ・上揃え*/
.as-start { align-self: flex-start; }/*上揃え*/
.as-end { align-self: flex-end; }/*下揃え*/
.as-center { align-self: center; }/*中央揃え*/
.as-stretch { align-self: stretch; }/*上揃え*/
.as-baseline{ align-self: baseline; }/*上揃え*/
/*==========================================================
矢印リンク テキスト用
==========================================================*/
/*共通 aタグに指定*/
.arrow{
position: relative;
display: inline-block;
color: #000;
vertical-align: middle;
text-decoration: none;
padding-right: 0.8em;
line-height: 1;
}
/*＞ カラー aタグに指定*/
.ar_white::after{
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
content: "";
vertical-align: middle;
width: 0.4em; /* arrow size */
height: 0.4em; /* arrow size */
border-top: 1px solid #fff; /* thickness, color */
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.ar_brown::after{
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
content: "";
vertical-align: middle;
width: 0.4em; /* arrow size */
height: 0.4em; /* arrow size */
border-top: 1px solid #a58a58; /* thickness, color */
border-right: 1px solid #a58a58;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/*==========================================================
ボタン
==========================================================*/
/*通常ボタン aタグに指定*/
.btn{
display: inline-block;
padding: 0.6em 2em;
}
/*通常大きめボタン aタグに指定*/
.btn2{
display: inline-block;
padding: 1em 3em;
}
/*通常ボタンブロック aタグに指定*/
.btn_block{
display: block;
padding: 0.6em 2em;
}
/*小さめボタン aタグに指定*/
.btnmini{
display: inline-block;
padding: 0.3em 2em 0.3em 1em;
}
/*右矢印 btnと一緒に指定*/
.r_arrow {
position: relative;
}
.btn.r_arrow,
.btn.r_arrow_w { padding-right: 2.6em; }
.btn2.r_arrow,
.btn2.r_arrow_w { padding-right: 3.4em; }
.r_arrow::after{
content: '';
width: 6px;
height: 6px;
border: 0px;
border-top: solid 1px #19283f;
border-right: solid 1px #19283f;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: all .2s;
position: absolute;
top: 50%;
right: 1.2em;
margin-top: -4px;
}
.r_arrow:hover::after{
right: 0.8em;
}
/*右矢印白 btnと一緒に指定*/
.r_arrow_w {
position: relative;
}
.r_arrow_w::after{
content: '';
width: 6px;
height: 6px;
border: 0px;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: all .2s;
position: absolute;
top: 50%;
right: 1.2em;
margin-top: -4px;
}
.r_arrow_w:hover::after{
right: 0.8em;
}
/*左矢印 btnと一緒に指定*/
.l_arrow {
position: relative;
display: inline-block;
padding-left: 2.5em !important;
}
.l_arrow::before{
content: '';
width: 6px;
height: 6px;
border: 0px;
border-top: solid 1px #19283f;
border-right: solid 1px #19283f;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 50%;
left: 1em;
margin-top: -4px;
}
/*左矢印 btnと一緒に指定*/
.l_arrow_w {
position: relative;
display: inline-block;
padding-left: 2.5em !important;
}
.l_arrow_w::before{
content: '';
width: 6px;
height: 6px;
border: 0px;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 50%;
left: 1em;
margin-top: -4px;
}
/*----背景色・ボーダーパターン----*/
/*和白色*/
.acWa1:link,
.acWa1:visited{ color:#333!important; background:url(../img/line_h.gif) repeat-y left,url(../img/line_h.gif) repeat-y right,url(../img/line_w.gif) repeat-x top,url(../img/line_w.gif) repeat-x bottom, #fff; text-decoration: none !important; }
.acWa1:hover{
text-decoration: none !important;
transition: 0.6s ;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7 ;
}
/*和茶色*/
.acWa2:link,
.acWa2:visited{ color:#fff!important; background:url(../img/line_h.gif) repeat-y left,url(../img/line_h.gif) repeat-y right,url(../img/line_w.gif) repeat-x top,url(../img/line_w.gif) repeat-x bottom, #8e8262; text-decoration: none !important; }
.acWa2:hover{
text-decoration: none !important;
transition: 0.6s ;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7 ;
}
/*白色系*/
.acWhite:link,
.acWhite:visited{ color:#333!important; background-color: #fff; border: solid 1px #d7d1c7; text-decoration: none !important; }
.acWhite:hover{
text-decoration: none !important;
transition: 0.6s ;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7 ;
}
/*グレー系*/
.acGrey:link,
.acGrey:visited{ color:#333!important; background-color: #f4f0e8; text-decoration: none !important; }
.acGrey:hover{
text-decoration: none !important;
transition: 0.6s ;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7 ;
}
/*赤系強調*/
.acRed:link,
.acRed:visited{ color:#fff!important; background-color: #730f0f; text-decoration: none; }
.acRed:hover{
text-decoration: none !important;
transition: 0.6s ;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7 ;
}
.acRed2:link,
.acRed2:visited{ color:#fff!important; background-color: #831304; text-decoration: none; }
.acRed2:hover{
text-decoration: none !important;
transition: 0.6s ;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7 ;
}
/*青色ボタン用*/
.acBlue:link,
.acBlue:visited{color:#fff!important; background:#23527c; text-decoration: none!important; }
.acBlue:hover{
text-decoration: none !important;
transition: 0.8s ;
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8 ;
}
.acBlue2:link,
.acBlue2:visited{color:#fff!important; background-color: #3a69aa; text-decoration: none!important; }
.acBlue2:hover{
text-decoration: none !important;
transition: 0.8s ;
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8 ;
}
/*茶色ボタン用*/
.acBrown:link,
.acBrown:visited{color:#fff!important; background-color: #a58a58; text-decoration: none!important; }
.acBrown:hover{
text-decoration: none !important;
transition: 0.8s ;
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8 ;
}
.acBrown2:link,
.acBrown2:visited{color:#fff!important; background-color: #988b63; text-decoration: none!important; }
.acBrown:hover{
text-decoration: none !important;
transition: 0.8s ;
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8 ;
}
.acBrown3:link,
.acBrown3:visited{ color:#fff; background-color: #553322; text-decoration: none; }
.acBrown:hover{
text-decoration: none !important;
transition: 0.8s ;
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8 ;
}
/*緑色ボタン用*/
.acGreen:link,
.acGreen:visited{color:#fff!important; background-color: #5b874a; text-decoration: none!important; }
.acGreen:hover{
text-decoration: none !important;
transition: 0.8s ;
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8 ;
}
.acGreen2:link,
.acGreen2:visited{color:#fff!important; background-color: #537955; text-decoration: none!important; }
.acGreen2:hover{
text-decoration: none !important;
transition: 0.8s ;
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8 ;
}
/*オレンジ色ボタン用*/
.acOrange:link,
.acOrange:visited{color:#fff!important; background-color: #da7512; text-decoration: none!important; }
.acOrange:hover{
text-decoration: none !important;
transition: 0.8s ;
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8 ;
}
/*白ボタン用*/
.btnwhite{
display: block;
width: 100%;
margin: 0 auto;
padding: 1em 1em;
text-align: center;
color: #333 !important;
border: 2px solid #877653;
transition: .3s;
text-decoration: none;
}
.btnwhite:hover{
transition: opacity 0.3s ease-out 0.5s;
background: #877653;
color: #fff !important;
text-decoration: none;
}
/*==========================================================
グリッドシステム
==========================================================*/
/* 設置方法----------------------------
grid → マージン無し
grid_mb10 → マージン10px
grid_mb20 → マージン20px
grid_mb30 → マージン30px
row → Flexbox化
col2_sm1 → 2カラムでスマホは1カラム
〇html例
最終行を揃える為には空要素を追加する
----------------------------------------*/
/****************マージン0px****************/
.grid .row {
display: flex;
flex-wrap: wrap;
}
.grid .col {
width: 100%;
}
.grid .col2_sm1 > .col { width: 50%; }
.grid .col2_sm2 > .col { width: 50%; }
.grid .col3_sm1 > .col { width: 33.33333333%; }
.grid .col3_sm2 > .col { width: 33.33333333%; }
.grid .col3_sm3 > .col { width: 33.33333333%; }
.grid .col4_sm1 > .col { width: 25%; }
.grid .col4_sm2 > .col { width: 25%; }
.grid .col4_sm3 > .col { width: 25%; }
.grid .col4_sm4 > .col { width: 25%; }
.grid .col5_sm1 > .col { width: 20%; }
.grid .col5_sm2 > .col { width: 20%; }
.grid .col5_sm3 > .col { width: 20%; }
.grid .col5_sm4 > .col { width: 20%; }
.grid .col5_sm5 > .col { width: 20%; }
.grid .col6_sm1 > .col { width: 16.6666666%; }
.grid .col6_sm2 > .col { width: 16.6666666%; }
.grid .col6_sm3 > .col { width: 16.6666666%; }
.grid .col6_sm4 > .col { width: 16.6666666%; }
.grid .col6_sm5 > .col { width: 16.6666666%; }
.grid .col6_sm6 > .col { width: 16.6666666%; }
@media only screen and ( max-width : 599px ) {/*スマホ用*/
.grid .col2_sm1 > .col { width: 100%; }
.grid .col2_sm2 > .col { width: 50%; }
.grid .col3_sm1 > .col { width: 100%; }
.grid .col3_sm2 > .col { width: 50%; }
.grid .col3_sm3 > .col { width: 33.33333333%; }
.grid .col4_sm1 > .col { width: 100%; }
.grid .col4_sm2 > .col { width: 50%; }
.grid .col4_sm3 > .col { width: 33.33333333%; }
.grid .col4_sm4 > .col { width: 25%; }
.grid .col5_sm1 > .col { width: 100%; }
.grid .col5_sm2 > .col { width: 50%; }
.grid .col5_sm3 > .col { width: 33.33333333%; }
.grid .col5_sm4 > .col { width: 25%; }
.grid .col5_sm5 > .col { width: 20%; }
.grid .col6_sm1 > .col { width: 100%; }
.grid .col6_sm2 > .col { width: 50%; }
.grid .col6_sm3 > .col { width: 33.33333333%; }
.grid .col6_sm4 > .col { width: 25%; }
.grid .col6_sm5 > .col { width: 20%; }
.grid .col6_sm6 > .col { width: 16.6666666%; }
}
/****************マージン10px****************/
.grid_m10 .row {
display: flex;
flex-wrap: wrap;
justify-content:space-between;
}
.grid_m10 .col {
width: 100%;
margin-bottom: 10px;
}
.grid_m10 .col2_sm1 > .col { width: calc( (100% / 2) - 5px ); }
.grid_m10 .col2_sm2 > .col { width: calc( (100% / 2) - 5px ); }
.grid_m10 .col3_sm1 > .col { width: calc( (100% / 3) - 5px ); }
.grid_m10 .col3_sm2 > .col { width: calc( (100% / 3) - 5px ); }
.grid_m10 .col3_sm3 > .col { width: calc( (100% / 3) - 5px ); }
.grid_m10 .col4_sm1 > .col { width: calc( (100% / 4) - 5px ); }
.grid_m10 .col4_sm2 > .col { width: calc( (100% / 4) - 5px ); }
.grid_m10 .col4_sm3 > .col { width: calc( (100% / 4) - 5px ); }
.grid_m10 .col4_sm4 > .col { width: calc( (100% / 4) - 5px ); }
.grid_m10 .col5_sm1 > .col { width: calc( (100% / 5) - 5px ); }
.grid_m10 .col5_sm2 > .col { width: calc( (100% / 5) - 5px ); }
.grid_m10 .col5_sm3 > .col { width: calc( (100% / 5) - 5px ); }
.grid_m10 .col5_sm4 > .col { width: calc( (100% / 5) - 5px ); }
.grid_m10 .col5_sm5 > .col { width: calc( (100% / 5) - 5px ); }
.grid_m10 .col6_sm1 > .col { width: calc( (100% / 6) - 5px ); }
.grid_m10 .col6_sm2 > .col { width: calc( (100% / 6) - 5px ); }
.grid_m10 .col6_sm3 > .col { width: calc( (100% / 6) - 5px ); }
.grid_m10 .col6_sm4 > .col { width: calc( (100% / 6) - 5px ); }
.grid_m10 .col6_sm5 > .col { width: calc( (100% / 6) - 5px ); }
.grid_m10 .col6_sm6 > .col { width: calc( (100% / 6) - 5px ); }
@media only screen and ( max-width : 599px ) {/*スマホ用*/
.grid_m10 .col {
margin-bottom: 5px;
}
.grid_m10 .col2_sm1 > .col { width: 100%; }
.grid_m10 .col2_sm2 > .col { width: calc( (100% / 2) - 5px ); }
.grid_m10 .col3_sm1 > .col { width: 100%; }
.grid_m10 .col3_sm2 > .col { width: calc( (100% / 2) - 5px ); }
.grid_m10 .col3_sm3 > .col { width: calc( (100% / 3) - 5px ); }
.grid_m10 .col4_sm1 > .col { width: 100%; }
.grid_m10 .col4_sm2 > .col { width: calc( (100% / 2) - 5px ); }
.grid_m10 .col4_sm3 > .col { width: calc( (100% / 3) - 5px ); }
.grid_m10 .col4_sm4 > .col { width: calc( (100% / 4) - 5px ); }
.grid_m10 .col5_sm1 > .col { width: 100%; }
.grid_m10 .col5_sm2 > .col { width: calc( (100% / 2) - 5px ); }
.grid_m10 .col5_sm3 > .col { width: calc( (100% / 3) - 5px ); }
.grid_m10 .col5_sm4 > .col { width: calc( (100% / 4) - 5px ); }
.grid_m10 .col5_sm5 > .col { width: calc( (100% / 5) - 5px ); }
.grid_m10 .col6_sm1 > .col { width: 100%; }
.grid_m10 .col6_sm2 > .col { width: calc( (100% / 2) - 5px ); }
.grid_m10 .col6_sm3 > .col { width: calc( (100% / 3) - 5px ); }
.grid_m10 .col6_sm4 > .col { width: calc( (100% / 4) - 5px ); }
.grid_m10 .col6_sm5 > .col { width: calc( (100% / 5) - 5px ); }
.grid_m10 .col6_sm6 > .col { width: calc( (100% / 6) - 5px ); }
}
/****************マージン20px****************/
.grid_m20 .row {
display: flex;
flex-wrap: wrap;
justify-content:space-between;
}
.grid_m20 .col {
width: 100%;
margin-bottom: 20px;
}
.grid_m20 .col2_sm1 > .col { width: calc( (100% / 2) - 10px ); }
.grid_m20 .col2_sm2 > .col { width: calc( (100% / 2) - 10px ); }
.grid_m20 .col3_sm1 > .col { width: calc( (100% / 3) - 10px ); }
.grid_m20 .col3_sm2 > .col { width: calc( (100% / 3) - 10px ); }
.grid_m20 .col3_sm3 > .col { width: calc( (100% / 3) - 10px ); }
.grid_m20 .col4_sm1 > .col { width: calc( (100% / 4) - 10px ); }
.grid_m20 .col4_sm2 > .col { width: calc( (100% / 4) - 10px ); }
.grid_m20 .col4_sm3 > .col { width: calc( (100% / 4) - 10px ); }
.grid_m20 .col4_sm4 > .col { width: calc( (100% / 4) - 10px ); }
.grid_m20 .col5_sm1 > .col { width: calc( (100% / 5) - 10px ); }
.grid_m20 .col5_sm2 > .col { width: calc( (100% / 5) - 10px ); }
.grid_m20 .col5_sm3 > .col { width: calc( (100% / 5) - 10px ); }
.grid_m20 .col5_sm4 > .col { width: calc( (100% / 5) - 10px ); }
.grid_m20 .col5_sm5 > .col { width: calc( (100% / 5) - 10px ); }
.grid_m20 .col6_sm1 > .col { width: calc( (100% / 6) - 10px ); }
.grid_m20 .col6_sm2 > .col { width: calc( (100% / 6) - 10px ); }
.grid_m20 .col6_sm3 > .col { width: calc( (100% / 6) - 10px ); }
.grid_m20 .col6_sm4 > .col { width: calc( (100% / 6) - 10px ); }
.grid_m20 .col6_sm5 > .col { width: calc( (100% / 6) - 10px ); }
.grid_m20 .col6_sm6 > .col { width: calc( (100% / 6) - 10px ); }
@media only screen and ( max-width : 599px ) {/*スマホ用*/
.grid_m30 .col {
margin-bottom: 10px;
}
.grid_m20 .col2_sm1 > .col { width: 100%; }
.grid_m20 .col2_sm2 > .col { width: calc( (100% / 2) - 5px ); }
.grid_m20 .col3_sm1 > .col { width: 100%; }
.grid_m20 .col3_sm2 > .col { width: calc( (100% / 2) - 5px ); }
.grid_m20 .col3_sm3 > .col { width: calc( (100% / 3) - 5px ); }
.grid_m20 .col4_sm1 > .col { width: 100%; }
.grid_m20 .col4_sm2 > .col { width: calc( (100% / 2) - 5px ); }
.grid_m20 .col4_sm3 > .col { width: calc( (100% / 3) - 5px ); }
.grid_m20 .col4_sm4 > .col { width: calc( (100% / 4) - 5px ); }
.grid_m20 .col5_sm1 > .col { width: 100%; }
.grid_m20 .col5_sm2 > .col { width: calc( (100% / 2) - 5px ); }
.grid_m20 .col5_sm3 > .col { width: calc( (100% / 3) - 5px ); }
.grid_m20 .col5_sm4 > .col { width: calc( (100% / 4) - 5px ); }
.grid_m20 .col5_sm5 > .col { width: calc( (100% / 5) - 5px ); }
.grid_m20 .col6_sm1 > .col { width: 100%; }
.grid_m20 .col6_sm2 > .col { width: calc( (100% / 2) - 5px ); }
.grid_m20 .col6_sm3 > .col { width: calc( (100% / 3) - 5px ); }
.grid_m20 .col6_sm4 > .col { width: calc( (100% / 4) - 5px ); }
.grid_m20 .col6_sm5 > .col { width: calc( (100% / 5) - 5px ); }
.grid_m20 .col6_sm6 > .col { width: calc( (100% / 6) - 5px ); }
}
/****************マージン30px****************/
.grid_m30 .row {
display: flex;
flex-wrap: wrap;
justify-content:space-between;
}
.grid_m30 .col {
width: 100%;
margin-bottom: 30px;
}
.grid_m30 .col2_sm1 > .col { width: calc( (100% / 2) - 15px ); }
.grid_m30 .col2_sm2 > .col { width: calc( (100% / 2) - 15px ); }
.grid_m30 .col3_sm1 > .col { width: calc( (100% / 3) - 15px ); }
.grid_m30 .col3_sm2 > .col { width: calc( (100% / 3) - 15px ); }
.grid_m30 .col3_sm3 > .col { width: calc( (100% / 3) - 15px ); }
.grid_m30 .col4_sm1 > .col { width: calc( (100% / 4) - 15px ); }
.grid_m30 .col4_sm2 > .col { width: calc( (100% / 4) - 15px ); }
.grid_m30 .col4_sm3 > .col { width: calc( (100% / 4) - 15px ); }
.grid_m30 .col4_sm4 > .col { width: calc( (100% / 4) - 15px ); }
.grid_m30 .col5_sm1 > .col { width: calc( (100% / 5) - 15px ); }
.grid_m30 .col5_sm2 > .col { width: calc( (100% / 5) - 15px ); }
.grid_m30 .col5_sm3 > .col { width: calc( (100% / 5) - 15px ); }
.grid_m30 .col5_sm4 > .col { width: calc( (100% / 5) - 15px ); }
.grid_m30 .col5_sm5 > .col { width: calc( (100% / 5) - 15px ); }
.grid_m30 .col6_sm1 > .col { width: calc( (100% / 6) - 15px ); }
.grid_m30 .col6_sm2 > .col { width: calc( (100% / 6) - 15px ); }
.grid_m30 .col6_sm3 > .col { width: calc( (100% / 6) - 15px ); }
.grid_m30 .col6_sm4 > .col { width: calc( (100% / 6) - 15px ); }
.grid_m30 .col6_sm5 > .col { width: calc( (100% / 6) - 15px ); }
.grid_m30 .col6_sm6 > .col { width: calc( (100% / 6) - 15px ); }
@media only screen and ( max-width : 599px ) {/*スマホ用*/
.grid_m30 .col {
margin-bottom: 15px;
}
.grid_m30 .col2_sm1 > .col { width: 100%; }
.grid_m30 .col2_sm2 > .col { width: calc( (100% / 2) - 5px ); }
.grid_m30 .col3_sm1 > .col { width: 100%; }
.grid_m30 .col3_sm2 > .col { width: calc( (100% / 2) - 5px ); }
.grid_m30 .col3_sm3 > .col { width: calc( (100% / 3) - 5px ); }
.grid_m30 .col4_sm1 > .col { width: 100%; }
.grid_m30 .col4_sm2 > .col { width: calc( (100% / 2) - 5px ); }
.grid_m30 .col4_sm3 > .col { width: calc( (100% / 3) - 5px ); }
.grid_m30 .col4_sm4 > .col { width: calc( (100% / 4) - 5px ); }
.grid_m30 .col5_sm1 > .col { width: 100%; }
.grid_m30 .col5_sm2 > .col { width: calc( (100% / 2) - 5px ); }
.grid_m30 .col5_sm3 > .col { width: calc( (100% / 3) - 5px ); }
.grid_m30 .col5_sm4 > .col { width: calc( (100% / 4) - 5px ); }
.grid_m30 .col5_sm5 > .col { width: calc( (100% / 5) - 5px ); }
.grid_m30 .col6_sm1 > .col { width: 100%; }
.grid_m30 .col6_sm2 > .col { width: calc( (100% / 2) - 5px ); }
.grid_m30 .col6_sm3 > .col { width: calc( (100% / 3) - 5px ); }
.grid_m30 .col6_sm4 > .col { width: calc( (100% / 4) - 5px ); }
.grid_m30 .col6_sm5 > .col { width: calc( (100% / 5) - 5px ); }
.grid_m30 .col6_sm6 > .col { width: calc( (100% / 6) - 5px ); }
}
@media ( min-width : 600px ),print {/*PC用*/
/*グリッド高さ*/
.gh200 li{ height: 200px; }.gh210 li{ height: 210px; }.gh220 li{ height: 220px; }.gh230 li{ height: 230px; }.gh240 li{ height: 240px; }.gh250 li{ height: 250px; }.gh260 li{ height: 260px; }.gh270 li{ height: 270px; }.gh280 li{ height: 280px; }.gh290 li{ height: 290px; }
.gh300 li{ height: 300px; }.gh310 li{ height: 310px; }.gh320 li{ height: 320px; }.gh330 li{ height: 330px; }.gh340 li{ height: 340px; }.gh350 li{ height: 350px; }.gh360 li{ height: 360px; }.gh370 li{ height: 370px; }.gh380 li{ height: 380px; }.gh390 li{ height: 390px; }
.gh400 li{ height: 400px; }.gh410 li{ height: 410px; }.gh420 li{ height: 420px; }.gh430 li{ height: 430px; }.gh440 li{ height: 440px; }.gh450 li{ height: 450px; }.gh460 li{ height: 460px; }.gh470 li{ height: 470px; }.gh480 li{ height: 480px; }.gh490 li{ height: 490px; }
.gh500 li{ height: 500px; }.gh510 li{ height: 510px; }.gh520 li{ height: 520px; }.gh530 li{ height: 530px; }.gh540 li{ height: 540px; }.gh550 li{ height: 550px; }.gh560 li{ height: 560px; }.gh570 li{ height: 570px; }.gh580 li{ height: 580px; }.gh590 li{ height: 590px; }
.gh600 li{ height: 600px; }.gh610 li{ height: 610px; }.gh620 li{ height: 620px; }.gh630 li{ height: 630px; }.gh640 li{ height: 640px; }.gh650 li{ height: 650px; }.gh660 li{ height: 660px; }.gh670 li{ height: 670px; }.gh680 li{ height: 680px; }.gh690 li{ height: 690px; }
.gh700 li{ height: 700px; }.gh710 li{ height: 710px; }.gh720 li{ height: 720px; }.gh730 li{ height: 730px; }.gh740 li{ height: 740px; }.gh750 li{ height: 750px; }.gh760 li{ height: 760px; }.gh770 li{ height: 770px; }.gh780 li{ height: 780px; }.gh790 li{ height: 790px; }
}
/*==========================================================
シャドウエフェクト
==========================================================*/
/*---影右下左下---*/
.effect01{
display: inline-block;
position: relative;
}
.effect01:after {
position: absolute;
content: "";
box-shadow: 0 15px 10px rgba(0,0,0, .5); /* シャドウ */
transform: rotate(3deg); /* 回転させる */
right: 5px;
left: auto;
top: auto;
bottom: 15px;
z-index: -1;
width: 50%;
height: 20%;
}
.effect01:before {
position: absolute;
content: "";
box-shadow: 0 15px 10px rgba(0,0,0, .5); /* シャドウ */
transform: rotate(-3deg); /* 回転させる */
left: 5px;
top: auto;
bottom: 15px;
z-index: -1;
width: 50%;
height: 20%;
}
/*---影右下左下---*/
.effect02{
position: relative;
}
.effect02:after {
position: absolute;
content: "";
box-shadow: 0 15px 10px rgba(0,0,0, .5); /* シャドウ */
transform: rotate(1deg); /* 回転させる */
right: 5px;
left: auto;
top: auto;
bottom: 15px;
z-index: -1;
width: 50%;
height: 20%;
}
.effect02:before {
position: absolute;
content: "";
box-shadow: 0 15px 10px rgba(0,0,0, .5); /* シャドウ */
transform: rotate(-1deg); /* 回転させる */
left: 5px;
top: auto;
bottom: 15px;
z-index: -1;
width: 50%;
height: 20%;
}
/*==========================================================
画像装飾
==========================================================*/
/*斜線枠 白 divでimg囲む*/
.imgdeco01_w {
position: relative;
}
.imgdeco01_w::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 20px);
height: calc(100% - 20px);
border-image-source: repeating-linear-gradient(45deg, #fff, #fff 3px, rgba(0 0 0 / 0) 0, rgba(0 0 0 / 0) 6px);
border-image-slice: 20;
border-image-repeat: round;
border-style: solid;
border-width: 20px;
}
/*左上・右下切込み*/
.imgdeco02 {
position: relative;
}
.imgdeco02::before,
.imgdeco02::after {
content: '';
position: absolute;
transform: rotate(-35deg);
width: 70px;
height: 25px;
background-color: #fff;
z-index: 1;
}
.imgdeco02::before {
top: -10px;
left: -25px;
border-bottom: 1px solid #aaa;
}
.imgdeco02::after {
bottom: -10px;
right: -25px;
border-top: 1px solid #aaa;
}
/*角に装飾 右上・左下▲ */
.imgdeco03 {
position: relative;
}
.imgdeco03::before,
.imgdeco03::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
.imgdeco03::before {
top: -10px;
right: -10px;
border-width: 0 50px 50px 0;
border-color: transparent #053e62 transparent transparent;
}
.imgdeco03::after {
bottom: -10px;
left: -10px;
border-width: 50px 0 0 50px;
border-color: transparent transparent transparent #053e62;
}
/*==========================================================
フェードアニメーション設定
==========================================================*/
/*1.フェードインアニメーションの指定*/
/* 設置方法----------------------------
〇html例
*/
.scrollanime {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeInDown {
animation-name: fadeInDown;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes fadeInDown {
0% {
opacity: 0;
}
100% {
opacity: 1;
transform: translate(0);
}
}
/*2.上下の動きを指定*/
.updown {transform: translateY(-100px);}
.downup {transform: translateY(100px);}
/*3.左右の動きを指定*/
.sect02{overflow: hidden;} /*横スクロールバーを隠す*/
.slide-right {transform: translateX(200px);}
.slide-left {transform: translateX(-200px);}
@media only screen and ( max-width : 599px ) {/*スマホ用*/
.slide-right {transform: translateY(100px);}
.slide-left {transform: translateY(100px);}
}