/*====================================================
------------------------------------------------------
    base.css
------------------------------------------------------
====================================================*/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
* {-webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   box-sizing: border-box
  }

html { overflow-y: scroll; _overflow: auto; font-size: 62.5%;}/**1rem=10px**/
html, body { width: 100%; min-height: 100%;}
body {
 font-family: "Hiragino Sans", ヒラギノ角ゴシック, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Osaka, Arial, sans-serif;
 font-size: 1.4rem; line-height: 1.8; overflow: hidden; color: #555; background: #fff;
 -ms-text-size-adjust: 100%;
 -webkit-text-size-adjust: 100%;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

@media screen and (max-width: 750px) {/*sp*/
body { font-size: 1.3rem; line-height: 2; letter-spacing: 0;}
}

a { text-decoration: underline; color: #6a6a6a;}
a:hover { text-decoration: none; color: #6a6a6a;}

i { padding-right: .3rem;}

.onlyPc { display: block;}
.onlySp { display: none;}
@media screen and (max-width: 750px) {
.onlyPc { display: none;}
.onlySp { display: block;}
}
.ff_noto {
  font-family: 'Noto Sans JP',arial, sans-serif;
}
/* --------------------------------------------------
    utility
-------------------------------------------------- */
.trs02 {
 -webkit-transition: all .2s ease;
 -moz-transition: all .2s ease;
 -ms-transition: all .2s ease;
 -o-transition: all .2s ease;
 transition: all .2s ease;
}

.trs03 {
 -webkit-transition: all .3s ease;
 -moz-transition: all .3s ease;
 -ms-transition: all .3s ease;
 -o-transition: all .3s ease;
 transition: all .3s ease;
}
.trs05 {
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
 -ms-transition: all .5s ease;
 -o-transition: all .5s ease;
 transition: all .5s ease;
}

@keyframes fadeIn {
 0% {opacity: 0}
 100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
 0% {opacity: 0}
 100% {opacity: 1}
}

@-webkit-keyframes imgTrans {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}




.fLeft { float: left; margin: 0 20px 10px 0;}
.fRight { float: right; margin: 0 0 10px 20px;}

@media screen and (max-width: 640px) {
.fLeft, .fRight { clear: both; float: none; display: block; margin: 10px auto;}
}


/*--- columnSet ---*/
.column_2, .column_2a, .column_2b, .column_3, .column_4, .column_5, .columnSet { width: 100%; margin: 0 0 15px 0; zoom: 1;}
.column_2:after, .column_2a:after, .column_2b:after, .column_3:after, .column_4:after, .column_5:after, .columnSet:after
{ clear: both; content: "."; display: block; height: 0; visibility: hidden;}


/*--- 2 column ---*/
.column_2 > div { width: 48%; float: left; margin: 0; padding: 0;}
.column_2 > div:nth-child(2n) { float: right;}
.column_2 > div:nth-child(2n+1) { clear: both;}

.column_2a > div { width: 20%; float: left; margin: 0; padding: 0;}
.column_2a > div:nth-child(2n) { width: 75%; float: right;}
.column_2a > div:nth-child(2n+1) { clear: both;}

.column_2b > div { width: 65%; float: left; margin: 0; padding: 0;}
.column_2b > div:nth-child(2n) { width: 30%; float: right;}
.column_2b > div:nth-child(2n+1) { clear: both;}

/*--- 3 column ---*/
.column_3 > div { display: block; width: 30%; float: left; margin: 0 5% 0 0; padding: 0;}
.column_3 > div:nth-child(3n) { float: right; margin: 0;}
.column_3 > div:nth-child(3n+1) { clear: both;}


/*--- 4 column ---*/
.column_4 > div { width: 22%; float: left; margin: 0 4% 0 0; padding: 0;}
.column_4 > div:nth-child(4n) { float: right; margin: 0;}
.column_4 > div:nth-child(4n+1) { clear: both;}


/*--- 5 column ----*/
.column_5 > dl { width: 17%; float: left; margin: 0 3.7% 0 0; padding: 0;}
.column_5 > dl:nth-child(5n) { float: right; margin: 0;}
.column_5 > dl:nth-child(5n+1) { clear: both;}


.column_2 > div img,
.column_2a > div img,
.column_2b > div img,
.column_3 > div img,
.column_4 > div img,
.column_5 > dl dd img { display: inline; width: 100%;}

@media screen and (max-width: 750px){
.column_2 > div,
.column_2 > div:nth-child(2n),
.column_2a > div,
.column_2a > div:nth-child(2n),
.column_2b > div,
.column_2b > div:nth-child(2n),
.column_3 > div,
.column_3 > div:nth-child(3n)
{ width: 100%; clear: both; margin: 0 0 15px 0; padding: 0 5px;}

.column_4 > div:nth-child(4n), .column_5 > dl:nth-child(5n),
.column_4 > div:nth-child(4n+1) , .column_5 > dl:nth-child(5n+1),
.column_4 > div, .column_5 > dl { float: none; clear: none; display: inline-block; width: 47%; margin: 0 0 15px 2%; padding: 0;}
.column_4 > dl dd, .column_5 > dl dd { display: inline;}
}

.ffSerif {
 font-family: 'Times New Roman', '游明朝体', 'Yu Mincho', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'HGS明朝B', 'Hiragino Mincho ProN', 'ＭＳ Ｐ明朝', 'MS PMincho', serif; letter-spacing: 0;
}
.ffSans {font-family: "Hiragino Sans", ヒラギノ角ゴシック, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Osaka, Arial, sans-serif;}

.fs12 { font-size: 1.2rem;}
.fs16 { font-size: 1.6rem;}
.tCenter { text-align: center;}
.tRight { text-align: right;}
.tLeft { text-align: left;}
.italic { font-style: italic;}
.lh160 { line-height: 160%}

.caption { display: block; font-size: 1rem; color: #666; line-height: 140%; margin: 0;}

.mT0 { margin-top: 0;}
.mT10 { margin-top: 10px;}
.mT20 { margin-top: 20px;}
.mT30 { margin-top: 30px;}
.mT40 { margin-top: 40px;}
.mT50 { margin-top: 50px;}
.mB0 { margin-bottom: 0;}
.mB10 { margin-bottom: 10px;}
.mB20 { margin-bottom: 20px;}
.mB30 { margin-bottom: 30px;}
.mB40 { margin-bottom: 40px;}
.mB50 { margin-bottom: 50px;}
.mB80 { margin-bottom: 80px;}

.pT10 { padding-top: 10px;}
.pT20 { padding-top: 20px;}
.pT30 { padding-top: 30px;}
.pT40 { padding-top: 40px;}
.pT50 { padding-top: 50px;}
.pB10 { padding-bottom: 10px;}
.pB20 { padding-bottom: 20px;}
.pB30 { padding-bottom: 30px;}
.pB40 { padding-bottom: 40px;}
.pB50 { padding-bottom: 50px;}
.pL10 { padding-left: 10px;}
.pL20 { padding-left: 20px;}
.pL30 { padding-left: 30px;}
.pL40 { padding-left: 40px;}
.pL50 { padding-left: 50px;}
.pR10 { padding-right: 10px;}
.pR20 { padding-right: 20px;}
.pR30 { padding-right: 30px;}
.pR40 { padding-right: 40px;}
.pR50 { padding-right: 50px;}

.w30 { width: 30%;}
.w40 { width: 40%;}
.w50 { width: 50%;}
.w60 { width: 60%;}
.w70 { width: 70%;}

.clearboth {
  clear: both;
}