@charset "utf-8";

/* ski */
.preload .wow.fadeIn,
.preload .wow.fadeInUp,
.preload .wow.fadeInRight,
.preload .wow.fadeInLeft {
  opacity: 0 !important;
}
article {
  overflow: hidden;
}
.page.page2{
    width: 100%;
    max-width: 1260px;
    padding: 0 20px;
  }
.page.page2 ul{
    width:100%;
    max-width:1260px;
    margin-right:auto;
    margin-left:auto;
}
.page ul{
    width:100%;
    max-width:1260px;
    margin-right:auto;
    margin-left:auto;
}

	.page.page2 ul row{
		width:100%;
		margin-right:10px;
		margin-left:10px;
        padding:0;
	}

@media screen and (max-width: 768px){
	.page.page2{
		width:100%;
		max-width:760px;
		padding:0;
		margin:0;
	}
	.page.page2 ul row{
		width:100%;
		margin-right:10px;
		margin-left:10px;
        padding:0;
	}
}

/*
.page h3{
    font-size:min(7vw,2.6rem);
    color:#1075bf;
}
*/
.page li h3{
    margin-top: 12px; 
    margin-bottom: 12px; 
    font-size:18px;
    color: #036eb8;
}
.page li h4{
    margin-top: 12px; 
    margin-bottom: 12px; 
    font-size:18px;
    color: #036eb8;
}

.sp {
    display: none;
  }
  .nowrap{
    white-space:nowrap;
  }
  .en{
    font-family:"itc-avant-garde-gothic-pro", sans-serif !important;
    font-weight:100 !important;
  }
#mainimg h1 {
    width: 42.2%;
    max-width: 516px;
/*    padding: 0 20px;*/
    padding: 20px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 1;
    transform: translateY(-50%);
}
footer small {
    font-size: smaller;
}
.posrel {
    position: relative;
}
.ttl{
    margin-bottom:30px;
    text-align:center;
    color:#036eb8;
}
#tourTxt{
width:96%;
max-width:640px;
margin:0 auto;
padding:30px 0;
font-size:min(3.5vw,1.2rem);
text-align:center;
}
.skyBg{
    background-image:repeating-linear-gradient(-315deg,rgba(163,188,226,1.0),rgba(255,255,255,0.5),rgba(187,226,241,1.0));
    height:500px;
}
footer .page{
    width:calc(100% - 40px);
    margin: 0 auto;
    padding:0;
}
#recommend::after{
    content:"";
    display:block;
    clear:both;
}

#recommend{
    width:100%;
    height:auto;
    margin-bottom:200px;
    padding-bottom:30px;
    background:url(../../imgs_new/tokyo/ski/snowBg.png) left top no-repeat;
    background-size:cover;
}
/*
#recommend h3{
    margin-bottom:50px;
    text-align:center;
}
#recommend h3 span{
    display:block;
    margin-top:6px;
    font-size:56%;
    font-weight:normal;
}
*/
#recommend .ul li{
    padding-right:6px;
    padding-left:6px;
    margin-bottom:30px;
}
#recommend .ul li div.inner{
    width:100%;
    max-width:380px;
    height:100%;
    margin:0 auto;
    padding:10px;
    border-radius: 5px;
    background-image: linear-gradient(rgba(240,240,240,1.0) 0 10%,rgba(255,255,255,1.0) 30% 100%);
    box-shadow: 1.8px 1.8px 5px #555;
}
#recommend .ul li div.inner .inrTtl{
    position:relative;
}
#recommend .ul li div.inner .inrTtl figure{
    position:relative;
    width:100%;
    height:auto;
}
#recommend .ul li div.inner .inrTtl figcaption{
    position:absolute;
    left:0;
    top:50%;
    width:28%;
    height:auto;
    margin-top:-19px;
    font-size:min(4vw,1.0rem);
    line-height:120%;
    color:#fff;
    text-shadow: 0 0 4px #1d5260;
    text-align:center;
}

#recommend .ul li div.inner .inrTtl figcaption span{
    display:block;
    color:#ff0;
}
#recommend .ul li div.inner .glnd{
    position:absolute;
    left:31%;
    top:6%;
    font-size:min(2.4vw,1.1rem);
    font-weight:bold;
    color:#1075bf;
}
#recommend .ul li div.inner .inrTtl .hatsu{
    position:absolute;
    left:0px;
    top:50%;
    display:inline-block;
    width:29%;
    margin-top:12%;
    padding:2px;
    border:1px solid #444;
    background:#fff;
    font-size:min(3vw,0.7rem);
    line-height:120%;
    text-align:center;
}
#recommend .ul li div.inner .inrTtl .hatsu span{
display:block;
font-size:110%;
font-weight:bold;
text-align:center;
}
#recommend .ul li div.inner .inrTtl .hatsu br{
    display:none;
}
#recommend .ul li div.inner .recInf{
    position:relative;
width:calc(100% - 30%);
margin-top:-40px;
margin-left:31%;
font-size:min(2.4vw,1.0rem);
font-weight:bold;
line-height:130%;
color:#d00;
}
#recommend .ul li .inner .imgArea{
    position:relative;
 padding:10px 0 5px;
}
#recommend .ul li .inner .imgArea figure{
    position:relative;
}
#recommend .ul li .inner .imgArea figcaption{
    position:absolute;
    top:0px;
    right:0px;
    display:inline-block;
    padding:2px 3px;
    background:#d3d;
    font-size:min(2.5vw,0.8rem);
    line-height:120%;
    text-align:center;
    color:#fff;
}
#recommend .ul li .inner .prcArea p{
    margin-top:5px;
    line-height:150%;
}
#recommend .ul li .inner .btnArea{
    margin:15px auto 5px;
    text-align:center;
}
#recommend .ul li .inner .btnArea a{
    display:inline-block;
    width:135px;
    height:auto;
    margin-top:10px;
    padding:3px;
}
#bcp{ 
    position:relative;
    margin-top:100px;
    margin-bottom:100px;
}
#bcp #bcp_ttl .section_ttl.tal {
margin-top:-120px;
}
#bcp>div#vrtlBg{ 
    position:absolute;
    top:50px;
    bottom:60px;
    left:0;
    right:0;
    z-index:-1;
    background:url(../../imgs_new/tokyo/ski/snowBg.png) left top no-repeat;
    background-size:cover;
}
/*
#bcp h3{
    position:absolute;
    top:-90px;
    left:4%;
}
*/
#bcp h3>span{
    display:block;
    margin-top:20px;
    font-size:56%;
    font-weight:normal;
}
#bcp h3>span>span{
    display:block;
    margin-top:20px;
    font-size:85%;
}
#bcp div.page>figure.chseImg{ 
    position:absolute;
    top:-120px;
    right:4%;
    width:43%;
    max-width:480px;
}
#bcp li{
    padding-right:6px;
    padding-left:6px;
}
#bcp li>div{
    width:100%;
    height:100%;
/*
    background:#fff;
    border:1px solid #1075bf;
    border-radius: 8px;
*/
    overflow:hidden;
}
#bcp div.page ul{
    margin-bottom:0;
    padding-top: 11%;
    padding-bottom:0;
}
#bcp li>div figure{
width:100%;
}
#bcp li>div h4{
    margin-right:5px;
    margin-left:5px;
}
#bcp li>div p{
    margin:5px;
}
#areas .areas2{
    width:100%;
    height:240px;
    margin-bottom:50px;
    background:url(../../imgs_new/tokyo/ski/areasBg.jpg) center right no-repeat;
    background-size:170% auto;
}
#areas h2{
    position:relative;
    font-size:3.6rem;
    font-weight:bold;
    color:#fff;
    text-align:center;
}
#areas h2 span{
    display:block;
    font-size:36%;
    font-weight:normal;
}
#areas li,#bcp li{
    margin-bottom:12px;
}

@media screen and (min-width:993px) and (max-width:1090px){
    #recommend .ul li div.inner .glnd {
        font-size: min(4vw,1.0rem);
    }
#recommend .ul li div.inner .recInf {
    margin-top: -30px;
    font-size: 1.0rem;
}
}/*END 993-1090*/
@media screen and (max-width: 980px){
    #mainimg h1 {
        width: 366px;
        font-size: 24px;
    }
    #mainimg figure {
        overflow: hidden;
    }
    #mainimg figure img {
        width: 963px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .page li h4{
        font-size:14px;
    }
}/*END 980*/



@media screen and (max-width: 768px){
    #bcp div.page>figure.chseImg{ 
        top:-80px;
        width:45%;
    }

    #recommend .ul li div.inner .recInf{
        margin-top:-30px;
        line-height:120%;
    }
}/*END 768*/

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

    #mainimg figure img.pc{
        display:none;
    }
    #mainimg figure img.sp{
        display:block;
        width:auto;
        height:450px;
    }

}/*END 635*/

@media screen and (min-width:576px) and (max-width:635px){

    #mainimg figure img.pc{
        display:none;
    }
    #mainimg figure img.sp{
        display:block;
        width:auto;
        height:450px;
    }
    #recommend .ul li .inner .btnArea.oneBtn{
position:absolute;
bottom:10px;
    
    }
    #recommend .ul li .inner .btnArea.oneBtn a{
        display:block;
        width:50%;
        margin-right:auto;
        margin-left:auto;
    }
    #recommend .ul li .inner .btnArea.oneBtn img{
        width:100%;
    }
    #recommend .ul li div.inner .inrTtl .hatsu br{
        display:block;
    }
}/*END 576-635*/

@media screen and (max-width: 576px){
    #mainimg h1 {
        width:290px;
    }
    #mainimg figure img.sp{
        height:400px;
    }
    #areas .areas2{
        height:180px;
    }
    #areas h2{
        font-size:2.4rem;
    }
    #areas li,#bcp li{
        max-width:360px;
        margin-right:auto;
        margin-left:auto;
    }
    #recommend .ul li div.inner .glnd{
        font-size:min(4vw,1.1rem);
    }
    #recommend .ul li div.inner .recInf{
        margin-top:-40px;
        font-size:min(3.8vw,1.0rem);
    }
#recommend .ul li .inner .prcArea p {
    font-size:min(3.2vw,0.9rem);
}
.page ul {
    width:100%;
}
}/*END 576*/

@media screen and (max-width: 470px){
    #mainimg figure img.sp{
        height:100vw;
    }
    #recommend .ul li{
      padding:0 !important;  
    }
    #recommend .ul li div.inner .recInf {
        margin-top: -12%;
    }
/*
#bcp h3{
    top:-3.3%;
}
#bcp h3>span,#bcp h3>span>span{
    margin-top:15px;
}
*/
#bcp div.page>figure.chseImg{ 
    top:-60px;
}

}/*END 470*/


/*-----------------------------------------------------
flex-box
-----------------------------------------------------*/
.flex-row {
  display: flex;
  display: -webkit-flex;
/*  -webkit-justify-content: flex-end;
  justify-content: flex-end;*/
}

.flex-box{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
/* 20240105修正
.flex-1{
padding: 5px;
width: calc(100% / 1 - 10px)
}
.flex-2{
padding: 5px;
width: calc(100% / 2 - 10px)
}
.flex-2-1{
padding: 5px;
width: calc(100% / 2 - 10px)
}
.flex-3{
padding: 5px;
width: calc(100% / 3 - 10px)
}
.flex-3-1{
padding: 5px;
width: calc(100% / 3 - 10px)
}
.flex-3-2{
padding: 5px;
width: calc(100% / 3 - 10px)
}
.flex-4{
padding: 5px;
width: calc(100% / 4 - 10px)
}
.flex-4-2{
padding: 5px;
width: calc(100% / 4 - 10px)
}
.flex-4-1{
padding: 5px;
width: calc(100% / 4 - 10px)
}
.flex-5{
padding: 5px;
width: calc(100% / 5 - 10px)
}
.flex-5-1{
padding: 5px;
width: calc(100% / 5 - 10px)
}
.flex-5-2{
padding: 5px;
width: calc(100% / 5 - 10px)
}
.flex-6{
padding: 5px;
width: calc(100% / 6 - 10px)
}
.flex-6-1{
padding: 5px;
width: calc(100% / 6 - 10px)
}
.flex-6-2{
padding: 5px;
width: calc(100% / 6 - 10px)
}

@media screen and (max-width: 640px) {
.flex-2-1{
    width: calc(100% / 1 - 10px)
    }
.flex-2{
    width: calc(100% / 2 - 10px)
    }
.flex-2-1{
    width: calc(100% / 1 - 10px)
    }
.flex-3{
    width: calc(100% / 3 - 10px)
    }
.flex-3-1{
    width: calc(100% / 1 - 10px)
    }
.flex-3-2{
    width: calc(100% / 2 - 10px)
    }
.flex-4{
    width: calc(100% / 3 - 10px)
    }
.flex-4-2{
    width: calc(100% / 2 - 10px)
    }
.flex-4-1{
    width: calc(100% / 1 - 10px)
    }
.flex-5{
    width: calc(100% / 3 - 10px)
    }
.flex-5-2{
    width: calc(100% / 2 - 10px)
    }
.flex-5-1{
    width: calc(100% / 1 - 10px)
    }
.flex-6{
    width: calc(100% / 3 - 10px)
    }
.flex-6-2{
    width: calc(100% / 2 - 10px)
    }
.flex-6-1{
    width: calc(100% / 1 - 10px)
    }
 
}
*/

.flex-1{
padding: 5px;
width: calc(100% / 1)
}
.flex-2{
padding: 5px;
width: calc(100% / 2)
}
.flex-2-1{
padding: 5px;
width: calc(100% / 2)
}
.flex-3{
padding: 5px;
width: calc(100% / 3)
}
.flex-3-1{
padding: 5px;
width: calc(100% / 3)
}
.flex-3-2{
padding: 5px;
width: calc(100% / 3)
}
.flex-4{
padding: 5px;
width: calc(100% / 4)
}
.flex-4-2{
padding: 5px;
width: calc(100% / 4)
}
.flex-4-1{
padding: 5px;
width: calc(100% / 4)
}
.flex-5{
padding: 5px;
width: calc(100% / 5)
}
.flex-5-1{
padding: 5px;
width: calc(100% / 5)
}
.flex-5-2{
padding: 5px;
width: calc(100% / 5)
}
.flex-5-5{
padding: 5px;
width: calc(100% / 5)
}
.flex-6{
padding: 5px;
width: calc(100% / 6)
}
.flex-6-1{
padding: 5px;
width: calc(100% / 6)
}
.flex-6-2{
padding: 5px;
width: calc(100% / 6)
}
.flex-6-3{
padding: 5px;
width: calc(100% / 6)
}

@media screen and (max-width: 640px) {
.flex-2-1{
    width: calc(100% / 1)
    }
.flex-2{
    width: calc(100% / 2)
    }
.flex-2-1{
    width: calc(100% / 1)
    }
.flex-3{
    width: calc(100% / 3)
    }
.flex-3-1{
    width: calc(100% / 1)
    }
.flex-3-2{
    width: calc(100% / 2)
    }
.flex-4{
    width: calc(100% / 3)
    }
.flex-4-2{
    width: calc(100% / 2)
    }
.flex-4-1{
    width: calc(100% / 1)
    }
.flex-5{
    width: calc(100% / 3)
    }
.flex-5-1{
    width: calc(100% / 1)
    }
.flex-5-2{
    width: calc(100% / 2)
    }
.flex-5-5{
    width: calc(100% / 5)
    }
.flex-6{
    width: calc(100% / 3)
    }
.flex-6-1{
    width: calc(100% / 1)
    }
.flex-6-2{
    width: calc(100% / 2)
    }
.flex-6-3{
    width: calc(100% / 3)
    }
 
}

/*-----------------------------------------------------
margin関係
-----------------------------------------------------*/

.m-t-5 { margin-top: -5px!important; }
.m-t1 { margin-top: 1px!important; }
.m-t2 { margin-top: 2px!important; }
.m-t3 { margin-top: 3px!important; }
.m-t4 { margin-top: 4px!important; }
.m-t5 { margin-top: 5px!important; }
.m-t6 { margin-top: 6px!important; }
.m-t7 { margin-top: 7px!important; }
.m-t8 { margin-top: 8px!important; }
.m-t9 { margin-top: 9px!important; }
.m-t10 { margin-top: 10px!important; }
.m-t11 { margin-top: 11px!important; }
.m-t12 { margin-top: 12px!important; }
.m-t13 { margin-top: 13px!important; }
.m-t14 { margin-top: 14px!important; }
.m-t15 { margin-top: 15px!important; }
.m-t16 { margin-top: 16px!important; }
.m-t17 { margin-top: 17px!important; }
.m-t18 { margin-top: 18px!important; }
.m-t19 { margin-top: 19px!important; }
.m-t20 { margin-top: 20px!important; }
.m-t21 { margin-top: 21px!important; }
.m-t22 { margin-top: 22px!important; }
.m-t23 { margin-top: 23px!important; }
.m-t24 { margin-top: 24px!important; }
.m-t25 { margin-top: 25px!important; }
.m-t26 { margin-top: 26px!important; }
.m-t27 { margin-top: 27px!important; }
.m-t28 { margin-top: 28px!important; }
.m-t29 { margin-top: 29px!important; }
.m-t30 { margin-top: 30px!important; }
.m-t35 { margin-top: 35px!important; }
.m-t40 { margin-top: 40px!important; }
.m-t45 { margin-top: 45px!important; }
.m-t50 { margin-top: 50px!important; }
.m-t60 { margin-top: 60px!important; }
.m-t70 { margin-top: 70px!important; }
.m-t80 { margin-top: 80px!important; }
.m-t90 { margin-top: 90px!important; }
.m-t100 { margin-top: 100px!important; }
.m-t200 { margin-top: 200px!important; }
.m-t300 { margin-top: 300px!important; }
.m-t400 { margin-top: 400px!important; }
.m-t500 { margin-top: 500px!important; }
.m-b1 { margin-bottom: 1px!important; }
.m-b2 { margin-bottom: 2px!important; }
.m-b3 { margin-bottom: 3px!important; }
.m-b4 { margin-bottom: 4px!important; }
.m-b5 { margin-bottom: 5px!important; }
.m-b10 { margin-bottom: 10px!important; }
.m-b15 { margin-bottom: 15px!important; }
.m-b20 { margin-bottom: 20px!important; }
.m-b25 { margin-bottom: 25px!important; }
.m-b30 { margin-bottom: 30px!important; }
.m-l1{ margin-left: 1px!important; }
.m-l2{ margin-left: 2px!important; }
.m-l3{ margin-left: 3px!important; }
.m-l4{ margin-left: 4px!important; }
.m-l5{ margin-left: 5px!important; }
.m-l6{ margin-left: 6px!important; }
.m-l7{ margin-left: 7px!important; }
.m-l8{ margin-left: 8px!important; }
.m-l9{ margin-left: 9px!important; }
.m-l10{ margin-left: 10px!important; }
.m-l11{ margin-left: 11px!important; }
.m-l12{ margin-left: 12px!important; }
.m-l15{ margin-left: 15px!important; }
.m-l20{ margin-left: 20px!important; }
.m-l25{ margin-left: 25px!important; }
.m-l30{ margin-left: 30px!important; }
.m-r1{ margin-right: 1px!important; }
.m-r2{ margin-right: 2px!important; }
.m-r3{ margin-right: 3px!important; }
.m-r4{ margin-right: 4px!important; }
.m-r5{ margin-right: 5px!important; }
.m-r6{ margin-right: 6px!important; }
.m-r7{ margin-right: 7px!important; }
.m-r8{ margin-right: 8px!important; }
.m-r9{ margin-right: 9px!important; }
.m-r10{ margin-right: 10px!important; }
.m-r15{ margin-right: 15px!important; }
.m-r20{ margin-right: 20px!important; }
.m-r25{ margin-right: 25px!important; }
.m-r30{ margin-right: 30px!important; }

/*-----------------------------------------------------
padding関係
-----------------------------------------------------*/
.p-2{ padding: 2px; }
.p-3{ padding: 3px; }
.p-5{ padding: 5px; }
.p-rl5{ padding: 0 5px 0 5px; }
.p-10{ padding: 10px 10px 10px 10px; }
.p-15{ padding: 15px; }
.p-20{ padding: 20px; }
.p-25{ padding: 25px; }
.p-30{ padding: 30px; }
.p-35{ padding: 35px; }
.p-40{ padding: 40px; }
.p-45{ padding: 45px; }
.p-50{ padding: 50px; }
.p-55{ padding: 55px; }
.p-60{ padding: 60px; }
.p-65{ padding: 65px; }
.p-70{ padding: 70px; }
.p-t30 { padding-top: 30px!important; }


/*-----------------------------------------------------
フォントweight
-----------------------------------------------------*/
.fb{ font-weight: bold; }
.fn{ font-weight: normal; }
/*-----------------------------------------------------
フォントサイズ
-----------------------------------------------------*/
.f-s06em { font-size: 0.6em; }
.f-s07em { font-size: 0.7em; }
.f-s08em { font-size: 0.8em; }
.f-s09em { font-size: 0.9em; }
.f-s11em { font-size: 1.1em; }
.f-s12em { font-size: 1.2em; }
.f-s13em { font-size: 1.3em; }
.f-s14em { font-size: 1.4em; }
/*-----------------------------------------------------
フォントカラー
-----------------------------------------------------*/
.fc-333{ color:#333333; }
.fc-666{ color:#666666; }
.fc-999{ color:#999999; }
.fc-ccc{ color:#CCCCCC; }
.fc-red{ color:#CC0000; }
.fc-red2{ color:#AB0128; }
.fc-red3{ color:#D05656; }
.fc-pink{ color:#E95079; }
.fc-pink2{ color:#EB4678; }
.fc-ora{ color:#FF6600; }
.fc-whi{ color:#FFFFFF; }
.fc-green{ color:#009900; }
.fc-green2{ color:#336600; }
.fc-blu{ color:#006699 }
.fc-blu2{ color:#72d5d6; }
.fc-gra2{ color:#979a9b; }
.fc-bro2{ color:#d0773c; }
.fc-red4{ color:#fe584b; }
.fc-gre2{ color:#dde04a; }
.fc-yel2{ color:#ffcc00; }

.red{ color: #CC0000!important; }/*赤*/
.blue{ color: #0000dd!important; }/*青*/
.green{ color: #008000!important; }/*緑*/
.yellow{ color: #ffff00!important; }/*黄*/
.navy{ color: #1F26A9!important; }/*紺*/
.orange{ color: #ff6600!important; }/*橙*/
.pink{ color: #cc6699!important; }/*ピンク*/
.purple{ color: #660099!important; }/*紫*/
.olive{ color: #808000!important; }/*黄土色*/
.lime{ color: #00ff00!important; }/*黄緑*/
.aqua{ color: #167FA6!important; }/*水色*/
.sky{ color: #3399ff!important; }/*青*/
.black{ color: #000!important; }/*黒*/
.gray{ color: #ccc!important; }/*灰*/
.white{ color: #fff!important; }/*白*/
.cyan-blue{ color: #0693e3!important; }/*白*/


.col-red{ color: #ff574a!important; }/*ロゴ赤*/
.col-yel{ color: #fff000!important; }/*ロゴ黄色*/
.col-blu{ color: #74d4d5!important; }/*ロゴ水色*/
.col-gla{ color: #999a9B!important; }/*ロゴグレー*/
.col-bro{ color: #d1773B!important; }/*ロゴ茶*/
.col-gre{ color: #dee049!important; }/*ロゴ黄緑*/

/*-----------------------------------------------------
マーカー
-----------------------------------------------------*/

.marker_yel{
	background:#FFFF33;
}

/*-----------------------------------------------------
背景色
-----------------------------------------------------*/
.bg_grey1{ background:#F9F9F9; }/* うすグレー */
.bg_yellow{ background:#FFFFE0;	border:solid 1px #E6DB55;}/* うす黄色 */
.bg_d-yellow{background:#f6f4e7;	border:solid 1px #e6decf;}/* ダークイエロー */
/*background:#F4EFE1; 濃いベージュ*/
.bg_beige{background:#FDE8CB;}/* ベージュ */
.bg_l-blue{ background:#3498db; }/* 水色 */
.bg-blu{ background:#006699; }/* 青色 */
.bg-000{ background:#000000; }/*黒*/
.bg-333{ background:#333333; }/*グレー*/
.bg-666{ background:#666666; }/*グレー*/
.bg-999{ background:#999999; }/*グレー*/
.bg-ccc{ background:#CCCCCC; }/*グレー*/
.bg-efefef{ background:#efefef; }/*グレー*/
.bg-f9f9f9{ background:#f9f9f9; }/*グレー*/
.bg-f1f1f1{ background:#f1f1f1; }/*グレー*/
.bg-fff{ background:#fff; }/*白*/
.bg-pin1{ background:#FDE0DA; }/*薄紅*/
.bg-pink{ background:#FF99FF; }/*ピンク*/
.bg-s-pink{ background:#F53D7E; }/*ショッキングピンク*/
.bg-pink2{ background:#ffccff; }/*うすピンク*/
.bg-ora{ background:#FF9933; }/*オレンジ*/
.bg-green{ background:#e0e8d0; }/*薄緑*/
.bg-green2{ background:#009900; }/*緑*/
.bg-line-green{ background:#00B900; }/*Lineグリーン*/
.bg-blue{ background:#C8D2E3;}/*薄青*/
.bg-ashblue{ background:#F0F6FD;}/*アッシュblue*/
.bg-ffffcc{ background:#ffffcc; }/*薄黄*/
.bg-ffcc99{ background:#ffcc99; }/*薄茶*/
.bg-ffcc99{ background:#ffcc99; }/*薄茶*/


.bg-col-red{ background:#ff574a; }/*ロゴ赤*/
.bg-col-yel{ background:#fff000; }/*ロゴ黄色*/
.bg-col-blu{ background:#74d4d5; }/*ロゴ水色*/
.bg-col-gla{ background:#999a9B; }/*ロゴグレー*/
.bg-col-bro{ background:#d1773B; }/*ロゴ茶*/
.bg-col-gre{ background:#dee049; }/*ロゴ黄緑*/

.bg-rgba60{background-color: rgba(0,0,0,0.6);}/*半透明黒60％*/
.bg-rgba40{background-color: rgba(0,0,0,0.4);}/*半透明黒40％*/
.bg-rgba20{background-color: rgba(0,0,0,0.2);}/*半透明黒20％*/
.bg-rgba60-fff{background-color: rgba(255,255,255,0.6);}/*半透明白60％*/
.bg-rgba40-fff{background-color: rgba(255,255,255,0.4);}/*半透明白40％*/
.bg-rgba20-fff{background-color: rgba(255,255,255,0.2);}/*半透明白20％*/


/*-----------------------------------------------------
ボーダー border
-----------------------------------------------------*/

/* 実線グレー */

.bo{ border:solid 1px #CCCCCC; }
.bo-t{ border-top:solid 1px #CCCCCC; }
.bo-l{ border-left:solid 1px #CCCCCC; }
.bo-r{ border-right:solid 1px #CCCCCC; }
.bo-b{ border-bottom:solid 1px #CCCCCC; }

/* 実線グレー(太枠) */

.bo-5px{ border:solid 5px #CCCCCC; }


/* 点線グレー */

.bo-dot{ border:dotted 1px #CCCCCC; }
.bo-dot-t{ border-top:dotted 1px #CCCCCC; }
.bo-dot-l{ border-left:dotted 1px #CCCCCC; }
.bo-dot-r{ border-right:dotted 1px #CCCCCC; }
.bo-dot-b{ border-bottom:dotted 1px #CCCCCC; }

/* 実線*上5pxロゴカラー */
.bo-t5_red{ border-top:5px solid #ff574a!important; }/*ロゴ赤*/
.bo-t5_yel{ border-top:5px solid #fff000!important; }/*ロゴ黄色*/
.bo-t5_blu{ border-top:5px solid #74d4d5!important; }/*ロゴ水色*/
.bo-t5_gla{ border-top:5px solid #999a9B!important; }/*ロゴグレー*/
.bo-t5_bro{ border-top:5px solid #d1773B!important; }/*ロゴ茶*/
.bo-t5_gre{ border-top:5px solid #dee049!important; }/*ロゴ黄緑*/
.bo-t5_ora{ border-top:5px solid #FF9933!important; }/*オレンジ*/

/* 実線*上8pxロゴカラー */
.bo-t8_red{ border-top:8px solid #ff574a!important; }/*ロゴ赤*/
.bo-t8_yel{ border-top:8px solid #fff000!important; }/*ロゴ黄色*/
.bo-t8_blu{ border-top:8px solid #74d4d5!important; }/*ロゴ水色*/
.bo-t8_gla{ border-top:8px solid #999a9B!important; }/*ロゴグレー*/
.bo-t8_bro{ border-top:8px solid #d1773B!important; }/*ロゴ茶*/
.bo-t8_gre{ border-top:8px solid #dee049!important; }/*ロゴ黄緑*/

/* 実線*上10pxロゴカラー */
.bo-t10_red{ border-top:10px solid #ff574a!important; }/*ロゴ赤*/
.bo-t10_yel{ border-top:10px solid #fff000!important; }/*ロゴ黄色*/
.bo-t10_blu{ border-top:10px solid #74d4d5!important; }/*ロゴ水色*/
.bo-t10_gla{ border-top:10px solid #999a9B!important; }/*ロゴグレー*/
.bo-t10_bro{ border-top:10px solid #d1773B!important; }/*ロゴ茶*/
.bo-t10_gre{ border-top:10px solid #dee049!important; }/*ロゴ黄緑*/

/* 実線*下5pxロゴカラー */
.bo-b5_red{ border-bottom:5px solid #ff574a!important; }/*ロゴ赤*/
.bo-b5_yel{ border-bottom:5px solid #fff000!important; }/*ロゴ黄色*/
.bo-b5_blu{ border-bottom:5px solid #74d4d5!important; }/*ロゴ水色*/
.bo-b5_gla{ border-bottom:5px solid #999a9B!important; }/*ロゴグレー*/
.bo-b5_bro{ border-bottom:5px solid #d1773B!important; }/*ロゴ茶*/
.bo-b5_gre{ border-bottom:5px solid #dee049!important; }/*ロゴ黄緑*/
.bo-b5_ora{ border-bottom:5px solid #FF9933!important; }/*オレンジ*/

/*-----------------------------------------------------
テキスト位置
-----------------------------------------------------*/
.cen{ text-align: center; }
.tacen{ margin: 0 auto; display: table; }
.rit{ text-align: right; }
.lef{ text-align: left; }

.m-auto{ margin:0px auto 0px auto; }

/*-----------------------------------------------------
float関係
-----------------------------------------------------*/
.fl-box{ overflow: hidden;}
.fl{ float: left; }
.fr{ float: right; }


/*-----------------------------------------------------
width関係(%)
-----------------------------------------------------*/

/* ●モバイル時に広がる */
.w1per{ width: 1%; }
.w2per{ width: 2%; }
.w3per{ width: 3%; }
.w4per{ width: 4%; }
.w5per{ width: 5%; }
.w6per{ width: 6%; }
.w7per{ width: 7%; }
.w8per{ width: 8%; }
.w9per{ width: 9%; }
.w10per{ width: 10%; }
.w11per{ width: 11%; }
.w12per{ width: 12%; }
.w13per{ width: 13%; }
.w14per{ width: 14%; }
.w15per{ width: 15%; }
.w16per{ width: 16%; }
.w16-666per{ width: 16.666666%; }
.w17per{ width: 17%; }
.w18per{ width: 18%; }
.w19per{ width: 19%; }
.w20per{ width: 20%; }
.w21per{ width: 21%; }
.w22per{ width: 22%; }
.w23per{ width: 23%; }
.w24per{ width: 24%; }
.w25per{ width: 25%; }
.w26per{ width: 26%; }
.w27per{ width: 27%; }
.w28per{ width: 28%; }
.w29per{ width: 29%; }
.w30per{ width: 30%; }
.w31per{ width: 31%; }
.w32per{ width: 32%; }
.w33per{ width: 33%; }
.w34per{ width: 34%; }
.w35per{ width: 35%; }
.w36per{ width: 36%; }
.w37per{ width: 37%; }
.w38per{ width: 38%; }
.w39per{ width: 39%; }
.w40per{ width: 40%; }
.w41per{ width: 41%; }
.w42per{ width: 42%; }
.w43per{ width: 43%; }
.w44per{ width: 44%; }
.w45per{ width: 45%; }
.w46per{ width: 46%; }
.w47per{ width: 47%; }
.w48per{ width: 48%; }
.w49per{ width: 49%; }
.w50per{ width: 50%; }
.w51per{ width: 51%; }
.w52per{ width: 52%; }
.w53per{ width: 53%; }
.w54per{ width: 54%; }
.w55per{ width: 55%; }
.w56per{ width: 56%; }
.w57per{ width: 57%; }
.w58per{ width: 58%; }
.w59per{ width: 59%; }
.w60per{ width: 60%; }
.w61per{ width: 61%; }
.w62per{ width: 62%; }
.w63per{ width: 63%; }
.w64per{ width: 64%; }
.w65per{ width: 65%; }
.w66per{ width: 66%; }
.w67per{ width: 67%; }
.w68per{ width: 68%; }
.w69per{ width: 69%; }
.w70per{ width: 70%; }
.w71per{ width: 71%; }
.w72per{ width: 72%; }
.w73per{ width: 73%; }
.w74per{ width: 74%; }
.w75per{ width: 75%; }
.w76per{ width: 76%; }
.w77per{ width: 77%; }
.w78per{ width: 78%; }
.w79per{ width: 79%; }
.w80per{ width: 80%; }
.w81per{ width: 81%; }
.w82per{ width: 82%; }
.w83per{ width: 83%; }
.w84per{ width: 84%; }
.w85per{ width: 85%; }
.w86per{ width: 86%; }
.w87per{ width: 87%; }
.w88per{ width: 88%; }
.w89per{ width: 89%; }
.w90per{ width: 90%; }
.w91per{ width: 91%; }
.w92per{ width: 92%; }
.w93per{ width: 93%; }
.w94per{ width: 94%; }
.w95per{ width: 95%; }
.w96per{ width: 96%; }
.w97per{ width: 97%; }
.w98per{ width: 98%; }
.w99per{ width: 99%; }
.w100per{ width: 100%; }

/* スマホ用 */

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

.w1per,.w2per,.w3per,.w4per,.w5per,
.w6per,.w7per,.w8per,.w9per,.w10per,
.w11per,.w12per,.w13per,.w14per,.w15per,
.w16per,.w16-666per,.w17per,.w18per,.w19per,.w20per,
.w21per,.w22per,.w23per,.w24per,.w25per,
.w26per,.w27per,.w28per,.w29per,.w30per,
.w31per,.w32per,.w33per,.w34per,.w35per,
.w36per,.w37per,.w38per,.w39per,.w40per,
.w41per,.w42per,.w43per,.w44per,.w45per,
.w46per,.w47per,.w48per,.w49per,.w50per,
.w51per,.w52per,.w53per,.w54per,.w55per,
.w56per,.w57per,.w58per,.w59per,.w60per,
.w61per,.w62per,.w63per,.w64per,.w65per,
.w66per,.w67per,.w68per,.w69per,.w70per,
.w71per,.w72per,.w73per,.w74per,.w75per,
.w76per,.w77per,.w78per,.w79per,.w80per,
.w81per,.w82per,.w83per,.w84per,.w85per,
.w86per,.w87per,.w88per,.w89per,.w90per,
.w91per,.w92per,.w93per,.w94per,.w95per,
.w96per,.w97per,.w98per,
.w99per{
	width:96%!important;
	margin-left:2%!important;
	margin-right:2%!important;
}
}
/* ●モバイルでも比率を保つ */
.mw10per{ width: 10%; }
.mw11per{ width: 11%; }
.mw12per{ width: 12%; }
.mw13per{ width: 13%; }
.mw14per{ width: 14%; }
.mw15per{ width: 15%; }
.mw16per{ width: 16%; }
.mw16-666per{ width: 16.666666%; }
.mw17per{ width: 17%; }
.mw18per{ width: 18%; }
.mw19per{ width: 19%; }
.mw20per{ width: 20%; }
.mw21per{ width: 21%; }
.mw22per{ width: 22%; }
.mw23per{ width: 23%; }
.mw24per{ width: 24%; }
.mw25per{ width: 25%; }
.mw26per{ width: 26%; }
.mw27per{ width: 27%; }
.mw28per{ width: 28%; }
.mw29per{ width: 29%; }
.mw30per{ width: 30%!important; }
.mw31per{ width: 31%; }
.mw32per{ width: 32%; }
.mw33per{ width: 33%; }
.mw34per{ width: 34%; }
.mw35per{ width: 35%; }
.mw36per{ width: 36%; }
.mw37per{ width: 37%; }
.mw38per{ width: 38%; }
.mw39per{ width: 39%; }
.mw40per{ width: 40%; }
.mw41per{ width: 41%; }
.mw42per{ width: 42%; }
.mw43per{ width: 43%; }
.mw44per{ width: 44%; }
.mw45per{ width: 45%; }
.mw46per{ width: 46%; }
.mw47per{ width: 47%; }
.mw48per{ width: 48%; }
.mw49per{ width: 49%; }
.mw50per{ width: 50%!important; }
.mw51per{ width: 51%; }
.mw52per{ width: 52%; }
.mw53per{ width: 53%; }
.mw54per{ width: 54%; }
.mw55per{ width: 55%; }
.mw56per{ width: 56%; }
.mw57per{ width: 57%; }
.mw58per{ width: 58%; }
.mw59per{ width: 59%; }
.mw60per{ width: 60%; }
.mw61per{ width: 61%; }
.mw62per{ width: 62%; }
.mw63per{ width: 63%; }
.mw64per{ width: 64%; }
.mw65per{ width: 65%; }
.mw66per{ width: 66%; }
.mw67per{ width: 67%; }
.mw68per{ width: 68%; }
.mw69per{ width: 69%; }
.mw70per{ width: 70%; }
.mw71per{ width: 71%; }
.mw72per{ width: 72%; }
.mw73per{ width: 73%; }
.mw74per{ width: 74%; }
.mw75per{ width: 75%; }
.mw76per{ width: 76%; }
.mw77per{ width: 77%; }
.mw78per{ width: 78%; }
.mw79per{ width: 79%; }
.mw80per{ width: 80%; }
.mw81per{ width: 81%; }
.mw82per{ width: 82%; }
.mw83per{ width: 83%; }
.mw84per{ width: 84%; }
.mw85per{ width: 85%; }
.mw86per{ width: 86%; }
.mw87per{ width: 87%; }
.mw88per{ width: 88%; }
.mw89per{ width: 89%; }
.mw90per{ width: 90%; }
.mw91per{ width: 91%; }
.mw92per{ width: 92%; }
.mw93per{ width: 93%; }
.mw94per{ width: 94%; }
.mw95per{ width: 95%; }
.mw96per{ width: 96%; }
.mw97per{ width: 97%; }
.mw98per{ width: 98%; }
.mw99per{ width: 99%; }
.mw100per{ width: 100%; }

/* ●モバイル時にのみ表示させる要素 */
.onlymbl{
	display:none;
}

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

.onlymbl{
	display:block;
}

/* ●モバイルで表示させない要素 */
.nombl{
	display:none!important;
}

} /*@media*/