@charset "utf-8";

@media screen and (max-width: 1240px){
#under, h1 ,h2{font-size:1.3vw;}
}

/*----------------*/
h1{margin: 0; padding:0;}
h2{display:none; margin: 0; padding:0;}
.under{font-family:メイリオ, Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
#under, h1, h2{
font-size:16px;
line-height: 1.6;
}
#under h2{display: block;}
.col-sm-12{padding: 0;}
#under dl{margin-bottom:0;}
.ns_container{max-width: 100%;}
.ns_container{margin-top: 0;}
.nav.nav-tabs{max-width: 980px; width: 100%; margin: 0 auto;}
.breadcrumb{margin-bottom: 0;}

/*------- 共通 ---------*/
.cap{font-size: 0.8em;}
.switch_pc{display: block !important;}
.switch_sp{display: none !important;}
.inner_wrap{
max-width:980px;
margin: 0 auto;
}
.flexBox{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}

/*-- mainVisual --*/
.mainVisual{
background-color: #FFF3C3;
width: 100%;
}
.mainVisual_inner{
max-width:1050px;
margin:0 auto;
}
/*-- topArea --*/
.topArea{padding-top:50px;}
.topArea .flexBox{
justify-content: space-between;
align-items: center;
}
.topArea .imgBox{
flex-basis:36%;
}
.topArea .txtBox{
flex-basis:62%;
}
.topArea .txtBox .leadArea{
margin-bottom: 10px;
}
.topArea .txtBox .listArea .listBox li{
background-color: #dbe5f1;
border-radius: 5px;
color: #1D2089;
font-weight: bold;
margin-bottom: 10px;
padding: 10px 20px;
}
.topArea .txtBox .catchBox p{
text-align: right;
font-size: 12px;
}

/*-- mainArea --*/
.mainArea{margin-top: 40px;}
.itemArea{margin-bottom: 60px;}
.itemArea .ttl{
margin-bottom: 20px;
font-size: 18px;
font-weight: bold;
color: #fff;
background-color: #1D2089;
padding:10px 30px;
line-height: 1;
}
.itemArea .txtArea{
margin-bottom: 30px;
padding: 10px 60px 0;
}
.itemArea .flexBox{
justify-content: space-around;
}
.itemArea .itemBox.col-two .box{
flex-basis: 40%;
}
.itemArea .itemBox.col-three .box{
flex-basis: 30%;
}

.itemArea .itemBox .box{
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
}

.itemArea .itemBox > div{margin-top: 10px;}
.itemBox .item_img{
margin-bottom: 10px;
}

.itemBox .area01{
 margin-bottom: 5px;
 }
 #area01 .itemBox .area01{
flex: 1;
height: 100%;
min-height: 0%;
}
#area01 .itemBox .area02{
flex: 2;
height: 100%;
min-height: 0%;
}
#area02 .itemBox .area01{
flex: 2;
height: 100%;
min-height: 0%;
margin-bottom: 20px;
}
#area02 .itemBox .area02{
flex: 2;
height: 100%;
min-height: 0%;
}
#area03 .itemBox .area01{
flex: 3;
height: 100%;
min-height: 0%;
margin-bottom: 20px;
}
#area03 .itemBox .area02{
flex: 2;
height: 100%;
min-height: 0%;
}

.itemArea .itemBox .item_ttl{
color: #1D2089;
font-size: 18px;
font-weight: bold;
line-height: 1.4;
}
.itemArea .itemBox .item_ttl .emphasis01{color:#009f0c;}
.itemArea .itemBox .item_ttl .emphasis02{color:#F00;}
.itemArea .itemBox .item_ttl .emphasis03{color:#009944;}/* ブランチパック用カラー */
.itemArea .itemBox .item_ttl .emphasis04{color:#f39700;}/* ブランチパック用カラー */
.itemArea .itemBox .item_ttl .emphasis05{color:#ea608e;}/* ブランチパック用カラー */

.itemArea .itemBox .item_desc{
height: 100%;
min-height: 0%;
margin-top: 20px;
margin-bottom: 10px;
font-size: 14px;
}
.itemArea .itemBox .item_num{
}
.itemArea .itemBox .item_num span{
border: 1px solid #ccc;
padding: 3px 10px;
font-size: 0.75em;
}
.itemArea .itemBox .item_price{
margin-top: 20px;
margin-bottom: 15px;
}
.itemArea .itemBox .item_btn{
margin-bottom: 15px;
}
.itemArea .itemBox .item_btn a{
display: inline-block;
background-color: #FF5F01;
color: #fff;
font-weight: bold;
padding: 15px 50px;
border-radius: 10px;
position: relative;
line-height: 1;
}
.itemArea .itemBox .item_btn a:after{
content: "";
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 15px;
width: 9px;
height: 9px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
}
.itemArea .itemBox .item_btn a:hover{
text-decoration: none;
opacity: 0.7;
}
.itemArea .itemBox .item_cap{
margin-top: 10px;
min-height: 50px;
}
.itemArea .itemBox .item_cap .iconBox{
display: inline-block;
color: #1D2089;
font-weight: bold;
padding: 7px 30px;
margin-top: 10px;
border-top: 1px solid #1D2089;
border-bottom: 1px solid #1D2089;
background-color: #dbe5f1;
font-size: 0.8em;
}

.itemArea#area03 .itemBox .item_img{
width:240px;
height: 200px;
}


/* 768px以下用：タブレット／*/
@media screen and (max-width: 768px){

/*------- 共通 ---------*/
.inner_wrap{
width:100%;
padding: 0 20px;
box-sizing: border-box;
}
.itemArea .txtArea{
padding: 10px 30px 0;
}
}

/* 480px以下用：landscape用の記述 */
@media screen and (max-width: 480px){
/*------- 共通 ---------*/
.switch_pc{display: none !important;}
.switch_sp{display: block !important;}
.inner_wrap{width:90%; padding: 0;}

/*-- topArea --*/
.topArea .flexBox{display: block;}
.topArea .txtBox .catchBox p{text-align: left;}
.itemArea .txtArea{
padding: 0;
}
.itemArea .itemBox{
display: block;
}
.itemArea .itemBox .box{
margin-bottom: 50px;
padding-bottom:30px;
border-bottom: 1px solid #ccc;
}
.itemArea .itemBox .box:last-child{
border-bottom: none;
}
.itemArea .itemBox .item_cap{
margin-top: 0;
}
.itemArea .itemBox .item_cap.none{
display: none;
}
.itemArea .ttl{
padding: 10px;
}

}

/* 375px以下用：landscape用の記述 */
@media screen and (max-width: 375px){
/*----------------*/

}

/* 320px以下用：landscape用の記述 */
@media screen and (max-width: 320px){
/*----------------*/

}