@charset "utf-8";
html,
body,
section,
div,
p,
a,
li,
th,
td {
    font-family: 'Noto Sans JP', sans-serif;
}



header {
    background: #ffe100;
    width: 100%;
    height: 80px;
}
header .headerInner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}
header .headerInner h1 {
    float: left;
    padding-top: 22px;
}
header .headerInner h1 img {
    height: 35px;
}
header .headerInner .koshienlogo {
    float: right;
    padding-top: 22px;
}
header .headerInner .koshienlogo img {
    height: 40px;
}
.mv{
    width: 100%;
    height:800px;/*通常時700px　キャンペーン時800px*/
    background: url("../commons/img/mv_bg.png");
    padding-top: 35px;
    border-bottom: 15px solid #000;
}
.mv figure{ width: 1100px;
margin:0 auto;
}
.mv figure img{ width: 100%;
height: auto;}


#contents {
width: 1000px;
margin: auto;
    border-left: 15px solid #000;
      border-right: 15px solid #000;
}

/*メインコンテンツ部分
=================================*/
.imageWrap {
width: 100%;
max-width: 1000px;
background: #fff;
   border-bottom: 15px solid #000;
}

.imageWrap h2{font-weight: 700;
font-size: 30px;
text-align: center;
line-height: 300%;}

.tokuten01{
    height: 470px;
background: url("../img/illust_01.png") no-repeat -30px bottom;
    background-size:auto 100%;
     border-bottom: 15px solid #000;
}
.tokuten01 .tokutenTxt_pc{ padding-top: 30px; width: 100%; text-align: right;}
.tokuten01 .tokutenTxt_pc img{width: 460px;  margin-right: 50px;
height: auto;}
.tokuten01 .tokutenTxt_sp{
	display: none;
}
.tokuten01 .detailBtn{  width: 100%;  text-align: right;}
.tokuten01 .detailBtn img{ width: 160px;  margin-right: 50px;
height: auto;}

.tokuten02{
    height: 440px;
background: url("../img/illust_02.png") no-repeat ;
    background-position: right -20px bottom;
    background-size:auto 100%;
     border-bottom: 15px solid #000;
}
.tokuten02 .tokutenTxt{ padding-top: 45px; width: 100%; text-align: left;}
.tokuten02 .tokutenTxt img{width: 530px;  margin-left: 50px;
height: auto;}
.btnArea{  border-bottom: 15px solid #000; padding: 0;}
.btnArea a{ display: block; line-height: 0;}
.btnArea img{ width: 100%; height: auto;}

.txtArea{ padding: 25px 50px;}
.txtArea h3{ font-size: 17px; line-height: 2; }
.txtArea p{  font-size: 14px; }

.tokutenTitle{ background: #000; color: #fff; font-weight: 700;
font-size: 30px;
text-align: center;
line-height: 300%;}

.benefit{
     border-bottom: 15px solid #000;
padding: 30px 50px;}
.benefit h3{background: url("../img/hanshin_mark.png") no-repeat center left;
    background-size:120px auto;
padding-left: 130px;
    height: 120px;
font-size: 27px; line-height: 130%; font-weight: 700; margin-bottom: 30px; letter-spacing: 0;}
.benefit p{ font-size: 18px; width: 600px; line-height: 140%;  margin-bottom: 20px;}
.benefit p .redtxt{ color: #ff0000;}
.benefit span.caption{ font-size: 15px;}
.benefit ul{width: 600px;}
.benefit ul li{ display: block; width: 48%; float: left;}
.benefit ul li:first-child{ margin-right: 4%;}
.benefit ul li img{ width: 100%; height: auto;}
.benefit ul li h4{ font-size: 20px; line-height: 250%; background: #ffe100; padding-left: 20px;}
.benefit ul li p{font-size: 17px; width: 100%; margin-top: 10px; text-align: justify;
text-justify: inter-ideograph;}
.benefit p.caption{ font-size: 12px; width: 100%; margin-bottom: 20px;}
.benefit p.atention{ background: #e60012 url("../img/attention.png") no-repeat 10px center; width: 830px;
   line-height: 300%;
    margin-top: 10px;
    margin-bottom: 5px;
   border-radius: 10px; color: #fff; font-size: 15px; font-weight: 700; padding-left: 70px; }
.benefit p.caption2{ font-size: 14px; color: #FF0000; width: 100%; margin-bottom: 0; text-indent: -1em; padding-left: 1em; box-sizing: border-box;}

.benefit dl{ border: solid #ffe100 6px; width: 600px; margin-bottom: 10px;}
.benefit dl dt{ background: #ffe100; text-align: center; font-weight: 700; font-size: 23px; line-height: 180%;}
.benefit dl dd {  padding: 15px 10px; }
.benefit dl dd p{  font-size: 18px; line-height: 120%;  padding-left:1em;
    width: auto; margin-bottom: 0;
text-indent:-1em; }

.pickup01{background:#fff url("../img/tokuten_illust01.png") no-repeat ;
    background-position: right 50px top 70px;
    background-size:280px auto;
    }
.pickup02{background:#fff url("../img/tokuten_illust02.png") no-repeat ;
    background-position: right 65px top 160px;
    background-size:225px auto;
    }

.pickup03{background:#fff url("../img/tokuten_illust03.png") no-repeat ;
    background-position: right 65px top 80px;
    background-size:235px auto;
    }

.benefit.pickup02 h3{
font-size: 27px; line-height: 130%;}
.benefit.pickup02 h3 span{ font-size: 20px;}
.benefit.pickup02 span.caption{ display: inline-block; font-size: 12px; line-height: 140%; margin-top: 10px;}
.benefit.pickup02 figure{ width: 600px;}
.benefit.pickup02 figure img{ width: 100%; height: auto;}

.benefit.pickup03 h3{
font-size: 32px; line-height: 130%;}
.benefit.pickup03 figure{ width: 600px;}
.benefit.pickup03 figure img{ width: 100%; height: auto;}

.otherArea{ padding: 50px 50px; border-top: 15px solid #000;}
.otherArea ul{ width: 100%;}
.otherArea ul li{ float: left; width: 600px;}
.otherArea ul li:first-child{ width: 270px; margin-right:30px;}
.otherArea ul li img{ width: 100%; height: auto;}
.otherArea ul li h3{ font-size: 25px; }
.otherArea ul li p{ font-size: 20px; margin-left: 20px;}
.otherArea ul li p span.caption{font-size: 15px;  }
.otherArea ul li p.caption{font-size: 12px; padding-left: 1em; text-indent: -1em; line-height: 140%;}
.otherBtn { 
    width: 860px;
    margin: 30px auto 0;
   line-height: 260%;
   border-radius: 10px; color: #000; font-size: 24px; font-weight: 700; text-align: center; }
.otherBtn a{ display: block; width: 100%; height: 100%; background: #fff url("../img/other_arw.png") no-repeat right 60px center / 44px auto;  border-radius: 20px; border: 2px solid #000;}
.otherBtn a:hover{ text-decoration: none; }

footer{ background: #000; color: #fff; text-align: center; font-size: 11px; line-height: 500%;}


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

    header {
       
        width: 100%;
        height: 45px;
       
    }
    header .headerInner {
        width: 100%;
        margin: 0 auto;
        padding: 0 0 5px;
    }
    header .headerInner h1 {
        width: 50%;
        float: left;
        padding-left: 10px;
        padding-top: 10px;
        box-sizing: border-box;
    }
    header .headerInner h1 img {
        width: auto;
        height: 15px;
    }
    header .headerInner .koshienlogo{ padding-top: 10px; padding-right: 10px;}
    header .headerInner .koshienlogo a img{
        width: auto;
        height: 25px;
    }
    
    .mv{
    width: 100%;
    height:auto;
    background: url("../commons/img/mv_bg.png");
    padding-top: 35px;
    border-bottom: 10px solid #000;
}
.mv figure{ width: 100%;
margin:0 auto;
}
.mv figure img{ width: 100%;
height: auto;}
    
	#contents {
width: 100%;
margin: auto;
        border: none;
}

.imageWrap {
width: 100%;
max-width:100%;
display: block;
padding: 10px 0;
margin: 0 auto;
background: #fff;
   border-bottom: 10px solid #000;
}


.imageWrap h2{font-weight: 700;
font-size: 24px;
text-align: center;
line-height: 130%;}

.tokuten01{
    height: auto;
background: none;
    background-size:auto 100%;
     border-bottom: 10px solid #000;
    padding-bottom: 0;
}
.tokuten01 .tokutenTxt_pc{
	display: none;
	}
.tokuten01 .tokutenTxt_sp{ display: block; padding-top: 30px; width: 100%; text-align: center;}
.tokuten01 .tokutenTxt_sp img{width: 94%;  margin-right:auto;
height: auto;}

.tokuten01 .detailBtn{  width: 100%;  text-align: center;}
.tokuten01 .detailBtn img{ width: 160px;  margin-right: auto; margin-left: auto;
height: auto;}
    .tokuten01 div{ text-align: center; padding: 10px 0 0 0; margin: 0; }
    .tokuten01 div img{ width: 80%; height: auto; vertical-align: bottom;}
.tokuten02{
    height: auto;
background:none;
    background-size:auto 100%;
     border-bottom: 0;
}
    .tokuten02 .tokutenTxt{ padding-top: 30px; width: 100%; text-align: center;}
.tokuten02 .tokutenTxt img{width: 94%;  margin-left: auto;
height: auto;}
    
     .tokuten02 div{ text-align: center; padding: 10px 0 0 0; margin: 0; }
    .tokuten02 div img{ width: 75%; height: auto; vertical-align: bottom;}
    
    .btnArea{  border-bottom: 0; padding: 0;}
.btnArea a{ display: block; line-height: 0;}
.btnArea img{ width: 100%; height: auto;}

.txtArea{ padding: 10px 3%;}
.txtArea h3{ font-size: 14px; line-height: 170%; text-indent: -1em; padding-left: 1em; }
.txtArea p{  font-size: 12px; line-height: 170%; padding-top: 5px; }

.tokutenTitle{ background: #000; color: #fff; font-weight: 700;
font-size: 24px;
text-align: center;
line-height: 200%;}
    
    .benefit{
     border-bottom: 10px solid #000;
padding: 20px 3%;}
.benefit h3{background: url("../img/hanshin_mark.png") no-repeat center top;
    background-size:80px auto;
    padding: 85px 0 0;
    height:auto;
	text-align: center;
font-size: 18px; line-height: 160%; font-weight: 700; margin-bottom: 15px; letter-spacing: 0;}
.benefit p{ font-size: 15px; width: 100%; line-height: 170%;  margin-bottom: 10px;}
.benefit p .redtxt{ color: #ff0000;}
.benefit span.caption{ font-size: 11px;}
.benefit ul{width: 100%;}
.benefit ul li{ display: block; width: 100%; float: none;}
.benefit ul li:first-child{ margin-right: 0;}
.benefit ul li img{ width: 100%; height: auto;}
.benefit ul li h4{ font-size: 16px; line-height: 200%; background: #ffe100; padding-left: 10px;}
.benefit ul li p{font-size: 14px; width: 100%; margin-top: 10px; text-align: left;}
.benefit p.caption{ font-size: 11px; width: 100%; margin-bottom: 10px;}
.benefit p.atention{ background: #e60012 url("../img/attention.png") no-repeat 10px center; width: calc(100% - 70px);
   line-height: 130%;
    margin: 10px auto;
    padding: 5px 10px 5px 60px;
   border-radius: 5px; color: #fff; font-size: 12px; font-weight: 700;  }
.benefit p.caption2{ font-size: 11px; color: #FF0000; width: 100%; margin-bottom: 0;}

.benefit dl{ border: solid #ffe100 6px; width: calc(100% - 12px); margin-bottom: 10px;}
.benefit dl dt{ background: #ffe100; text-align: center; font-weight: 700; font-size: 18px; line-height: 180%;}
.benefit dl dd {  padding: 10px 0; }
.benefit dl dd p{  font-size: 14px; line-height: 170%;  padding-left:2em; padding-right: 1em;
    width: auto; margin-bottom: 0;
text-indent:-1em; }

.pickup01{background:#fff  ;
    }
.pickup02{background:#fff  ;
    }

.pickup03{background:#fff; border-bottom: 0;
    }

.benefit.pickup02 h3{
font-size: 16px; line-height: 130%;}
.benefit.pickup02 h3 span{ font-size: 13px;}
.benefit.pickup02 span.caption{ font-size: 11px; line-height: 170%;}
.benefit.pickup02 figure{ width: 100%;}
.benefit.pickup02 figure img{ width: 100%; height: auto;}


.benefit.pickup03 h3{
font-size: 16px; line-height: 130%;}
.benefit.pickup03 h3 span{ font-size: 13px;}
.benefit.pickup03 span.caption{ font-size: 11px; line-height: 170%;}
.benefit.pickup03 figure{ width: 100%;}
.benefit.pickup03 figure img{ width: 100%; height: auto;}

    
    
.otherArea{ padding: 20px 3%; border-top: 10px solid #000;}
.otherArea ul{ width: 100%;}
.otherArea ul li{ float: none; width: 92%; margin: auto;}
.otherArea ul li:first-child{ width: 100%; margin-right:0; margin-bottom: 20px; text-align: center;}
.otherArea ul li img{ width: 90%; height: auto;}
.otherArea ul li h3{ font-size: 18px; }
.otherArea ul li p{ font-size: 14px; line-height: 170%; margin-left: 0;}
.otherArea ul li p span.caption{font-size: 12px;  }
.otherArea ul li p.caption{font-size: 11px; padding-left: 1em; text-indent: -1em; line-height: 170%; margin-top:3px;}
.otherBtn {
    width: 100%;
    margin: 20px auto 0;
   border-radius: 10px; color: #000; font-size: 16px; line-height: 140%;  font-weight: 700; text-align: center; }
.otherBtn a{ display: block; width: 100%; height: 100%; transform: all 0.3s; border-radius: 10px; background: #fff url("../img/other_arw.png") no-repeat right 2% center / 30px auto; padding: 10px 12% 10px 5%; box-sizing: border-box;}
.otherBtn a:hover{ text-decoration: none; }

footer{ background: #000; color: #fff; text-align: center; font-size: 11px; line-height: 350%;}
    
    
    
}