@charset "utf-8";

.pagetitle {position: relative; z-index: 10; font-size: 0;}
main h2 {background: url(../images/overview/bg_title.png) center top repeat-x; height: 197px; position: relative; z-index: 0; margin-bottom: 1px;}
main h2 span {display: block; height: 197px; background-position: center top; background-repeat: no-repeat;}
main #point01 h2 span {background-image: url(../images/overview/h201.png);}
main #point02 h2 span {background-image: url(../images/overview/h202.png);}
main #point03 h2 span {background-image: url(../images/overview/h203.png);}
main section .wrap{max-width: 1400px; min-width: 1200px; margin: 0 auto; position: relative; z-index: 20;}

@media screen and (min-width:641px){

#siteheader nav ul li:nth-child(2) a::before {top: 0; opacity: 1;}

#wrapper {padding-top: 0; overflow: hidden;}

#bg {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/top/bg.jpg) center top no-repeat; background-size: 100% auto; min-width: 1200px; z-index: 0;}
#bg02 {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/top/bg02.png) center top repeat-y; background-size: 100% auto; min-width: 1200px; z-index: 0;}

.pagetitle {padding: 130px 0 0; height: 229px; width: 1200px; margin: 0 auto 14px;}
.pagetitle span {display: block; background: url(../images/overview/h1.png) center top no-repeat; height: 70px;}

main #point01 {padding: 0 0 95px; position: relative;}
main #point01 h2 {z-index: 50;}
main #point01 h2::after{content: ''; background: url(../images/overview/point01_bg03.png) center top no-repeat; width: 1700px; height: 950px; position: absolute; left: 50%; top: -58px; margin-left: -850px; z-index: 30;}
main #point01 .text {width: 836px; margin: 100px auto 100px; background: url(../images/overview/point01_bg.png) center center repeat-y; padding: 0 70px; position: relative; z-index: 0;}
main #point01 .text::after{content: ''; background: url(../images/overview/point01_bg02.png) center top no-repeat; width: 100%; height: 100px; position: absolute; left: 0; top: -57px; z-index: 0;}
main #point01 .text::before{content: ''; background: url(../images/overview/point01_bg02.png) center bottom no-repeat; width: 100%; height: 100px; position: absolute; left: 0; bottom: -57px; z-index: 0;}
main #point01 .text p {font-size: 18px; line-height: 32px; text-align: left; color: #373d85; position: relative; z-index: 10;}
main #point01 .text .in {margin: -43px 0;}

main #point02 {padding: 0 0 72px; position: relative;}
main #point02 .wrap{max-width: 1400px; margin: 0 auto;}
main #point02 .text {width: 826px; margin: 74px auto 100px; background: url(../images/overview/point02_bg.png) center center repeat-y; padding: 0 70px; position: relative; z-index: 0; float: left; left: 12px;}
main #point02 .text::after{content: ''; background: url(../images/overview/point02_bg02.png) center top no-repeat; width: 100%; height: 100px; position: absolute; left: 0; top: -57px; z-index: 0;}
main #point02 .text::before{content: ''; background: url(../images/overview/point02_bg02.png) center bottom no-repeat; width: 100%; height: 100px; position: absolute; left: 0; bottom: -57px; z-index: 0;}
main #point02 .text p {font-size: 18px; line-height: 32px; text-align: left; color: #373d85; position: relative; z-index: 10;}
main #point02 .text .in {margin: 0px 0 -43px;}
main #point02 .imgs {width: 636px; position: absolute; rihgt: 50%; top: 0; z-index: 10; margin: 95px 0 0 750px; text-align: right;}
main #point02 .imgs img + img {position: relative; top: 12px; left: -116px;}
main #point02 .text {text-align: left;}
main #point02 .text p {font-size: 15px; line-height: 1.7; color: #373d85; position: relative; z-index: 10;}
main #point02 .text dl {padding: 0; color: #373d85; margin-bottom: 30px; position: relative; z-index: 10;}
main #point02 .text dl dt {font-size: 21px; line-height: 1.7; font-weight: bold; margin-bottom: 4px;}
main #point02 .text dl dt small {font-size: 17px; line-height: 1.7; font-weight: bold; display: inline-block; padding: 10px 0;}
main #point02 .text dl dd {font-size: 15px; line-height: 1.7; border-bottom: 1px solid #d2ad86; padding-bottom: 29px;}
main #point02 .text dl dd:last-child{border-bottom: none; padding-bottom: 0;}
main #point02 .text dl dd + dt {padding-top: 29px;}
main #point02 .text p.note {font-size: 15px; /*text-indent: -1em; padding-left: 1em;*/ line-height: 1.7; color: #373d85;}
main #point02 .text p.note i {width: 1em; display: inline-block; text-align: center;}
main #point02 .text dl dd p.note {font-size: 13px; /*text-indent: -1em; padding-left: 1em;*/}
main #point02 .text dl dd p + strong {margin-top: 1.8em; display: block;}

main #point03 {padding-bottom: 131px;}
main #point03 .text {width: 576px; margin: 100px 0 100px 760px; background: url(../images/overview/point03_bg.png) center center repeat-y; padding: 0 50px; position: relative; z-index: 0;}
main #point03 .text::after{content: ''; background: url(../images/overview/point03_bg02.png) center top no-repeat; width: 100%; height: 100px; position: absolute; left: 0; top: -57px; z-index: 0;}
main #point03 .text::before{content: ''; background: url(../images/overview/point03_bg02.png) center bottom no-repeat; width: 100%; height: 100px; position: absolute; left: 0; bottom: -50px; z-index: 0;}
main #point03 .text p {font-size: 18px; line-height: 32px; text-align: left; color: #373d85; position: relative; z-index: 10;}
main #point03 .text span {text-align: left; color: #373d85; background: #fbf7f0; border: 2px solid #d3b18a; display: block; position: relative; z-index: 10; padding: 23px 10px 23px 30px; margin: 33px -20px 0;}
main #point03 .text span h3{font-size: 17px; line-height: 23px; font-weight: bold;}
main #point03 .text span p{font-size: 15px; line-height: 23px; margin-top: 23px;}
main #point03 .text .in {margin: -43px 0 -50px;}
main #point03 p.img {position: absolute; right:50%; top: -6px; margin-right: -8px;}
main #point03 a{display: inline-block; position: absolute; left: 50%; bottom: -124px; z-index: 10; margin-left:-255px; transition: 0.3s;}
main #point03 a:hover{filter: brightness(1.2);}
.ie11 main #point03 a:hover{opacity: 0.7;}
}



@media screen and (min-width:1701px){}
@media screen and (max-width:1700px) and (min-width:641px){}

@media screen and (max-width:1400px) and (min-width:1201px) {
main #point02 .wrap{width: 100vw;}
main #point02 .imgs {margin: 95px 0 0 53.571vw; text-align: right;}
main #point02 .imgs img {width: 45.429vw; height: auto;}
main #point02 .imgs img + img {position: relative; top: 12px; left: -8.286vw; width: 38.643vw; height: auto;}
}
@media screen and (max-width:1200px) and (min-width:641px) {
main #point02 .wrap{width: 1200px;}
main #point02 .imgs {margin: 95px 0 0 640px; text-align: right;}
main #point02 .imgs img {width: 540px; height: auto;}
main #point02 .imgs img + img {position: relative; top: 12px; left: -80px; width: 470px; height: auto;}
}

@media screen and (max-width:1400px) and (min-width:641px) {
main #point03 .text {margin: 150px auto 100px;}
main #point03 .text {width: 836px; background: url(../images/overview/point01_bg.png) center center repeat-y; padding: 0 70px; position: relative; z-index: 0;}
main #point03 .text::after{content: ''; background: url(../images/overview/point01_bg02.png) center top no-repeat; width: 100%; height: 100px; position: absolute; left: 0; top: -57px; z-index: 0;}
main #point03 .text::before{content: ''; background: url(../images/overview/point01_bg02.png) center bottom no-repeat; width: 100%; height: 100px; position: absolute; left: 0; bottom: -57px; z-index: 0;}
main #point03 .text p {font-size: 18px; line-height: 32px; text-align: left; color: #373d85; position: relative; z-index: 10;}
main #point03 .text .in {margin: -43px 0;}
main #point03 p.img {position: static;}
}

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

    SP

**********************************************************************/
#wrapper {padding-top: 0; overflow: hidden; font-size: 0; width: 100vw;}

#bg {background: url(../images/common/bg_sp.jpg) center top no-repeat; background-size: 100vw auto; width: 100vw; height: 100%; min-width: inherit; position: fixed; left: 0; top: 0; z-index: 0;}
#bg02 {background: url(../images/common/sp/bg_second.png) center top no-repeat; height: 8.75vw; background-size: 100vw auto; width: 100vw; position: absolute; left: 0; top: 4.8vw;}

.pagetitle {position: relative; z-index: 10; padding: 14.3vw 0 5.988vw; width: 100vw;}
.pagetitle span {display: block; background: url(../images/overview/h1-sp.png) center top no-repeat; width: 100vw; height: 10.938vw; background-size: cover;}

main h2 {height: auto; background: none;}
main h2 span {display: block; background-size: auto 100%; height: 38.75vw; margin-bottom: 8.4vw;}
main #point01 h2 span {background-image: url(../images/overview/h201-sp.png);}
main #point02 h2 span {background-image: url(../images/overview/h202-sp.png); height: 30.781vw;}
main #point03 h2 span {background-image: url(../images/overview/h203-sp.png);}

main section .wrap{min-width: inherit;}

main .text {color: #373d85; text-align: left; margin: 0 0 15.625vw;}
main .text .in {background: url(../images/overview/bg_text-sp02.png) center top repeat-y; background-size: 100vw 100%; padding: 0 9.375vw; margin: 7.813vw 0; position: relative;}
main .text .in::after{content: ''; background: url(../images/overview/bg_text-sp.png) center bottom no-repeat; background-size: 100vw auto; height:7.813vw; width: 100vw; position: absolute; left: 0; bottom: -7.813vw;}
main .text .in::before{content: ''; background: url(../images/overview/bg_text-sp.png) center top no-repeat; background-size: 100vw auto; height:7.813vw; width: 100vw; position: absolute; left: 0; top: -7.813vw;}
main .text p {font-size: 3.125vw; line-height: 5.625vw;}
main #point01  {padding-bottom: 10vw;}
main #point02 {padding-bottom: 6.4vw;}
main #point02 .imgs {padding: 0 0 7.031vw; margin: -6vw 0 0;}
main #point02 .imgs img {width: 100vw; height: auto;}
main #point02 .text dl {padding: 0; color: #373d85; margin-bottom: 4.6875vw;}
main #point02 .text dl dt {font-size: 3.125vw; line-height: 1.7; font-weight: bold; margin-bottom: 0.625vw;}
main #point02 .text dl dd {font-size: 2.344vw; line-height: 1.7; border-bottom: 1px solid #d2ad86; padding-bottom: 4.6875vw;}
main #point02 .text dl dd + dt {padding-top:4.6875vw;}
main #point02 .text dl dd p {font-size: 2.344vw; line-height: 1.7;}
main #point02 .text p.note {font-size: 2.344vw; /*text-indent: -1em; padding-left: 1em;*/ line-height: 1.7; color: #373d85;}
main #point02 .text dl dd p.note {font-size:2.031vw; /*text-indent: -1em; padding-left: 1em;*/}
main #point02 .text dl dt small {font-size: 2.656vw; padding: 1.5vw 0; line-height: 1.7; display: block;}
main #point02 .text dl dd:last-child{border-bottom: none; padding-bottom: 0;}
main #point02 .text dl dd p + strong {margin-top: 1.5em; display: block;}

main #point03 {padding-bottom: 14.375vw}
main #point03 p.img {padding: 0 0 10vw 2.188vw; margin-top: -12.8vw;}
main #point03 p.img img {width: 96.875vw; height: auto;}
main #point03 a{display: inline-block; position: absolute; left: 50%; bottom: -18.875vw; z-index: 10; margin-left:-39.844vw; transition: 0.3s;}
main #point03 a img {width: 79.688vw; height: auto;}
main #point03 a:hover{filter: brightness(1.2);}
main #point03 .text .in{padding: 0 14.063vw;}
main #point03 .text span {text-align: left; color: #373d85; background: #fbf7f0; border: 2px solid #d3b18a; display: block; position: relative; z-index: 10; padding: 4.219vw 1.563vw 4.219vw 4.688vw; margin: 5.625vw -4.688vw 0;}
main #point03 .text span h3{font-size: 2.656vw; line-height: 3.594vw; font-weight: bold;}
main #point03 .text span p{font-size: 2.344vw; line-height: 3.594vw; margin-top: 3.594vw;}


}