@charset "utf-8";
/* CSS Document */
/*-----------------------------------------------
                    基本設定
------------------------------------------------*/
h2,
h3,
p,
li,
dt,
dd{
    font-family: 'Noto Sans JP', sans-serif;
    font-size:16px;
}
a{
    text-decoration:none;
    color: inherit;
}
li a:hover{
    opacity: 0.5;
}
article{
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/*----送信完了ページ限定------*/
#thankspage{
    position: relative;
    height: 100vh;
}
/*-----------------------------------------------
                    ヘッダー
------------------------------------------------*/
.responsive_nav{
    display: none;
}
header{
    width:100vw;
    height:60px;
    background-color: #0268b7;
    position: relative;
}
h1{
    width:100%;
    background-color: #fff;
    margin-top: 20px;
    position: absolute;
    height: 67px;
}
h1 img{
    padding-top:10px;
}
header h1 img{
    margin-left: 10vw;
}
header .pc_nav{
    position: absolute;
    top: 25px;
    right: 0;
    margin-right: 10vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}
header .pc_nav ul{
    margin: 5px 0;
    height: 47px;
    display: flex;
    align-items: center;
    list-style: none;
}
header .pc_nav ul li{
    margin:1vw;
}
.list1{
    width:90px;
    background-image: url(../img/2.png);
    background-repeat: no-repeat;
    background-position:0 50%;
    font-size:12px;
    text-align:end;
}
.list2{
    width:110px;
    background-image: url(../img/3.png);
    background-repeat: no-repeat;
    background-position:0 50%;
    font-size:12px;
    text-align:end;
}
.list3{
    width: 165px;
    padding: 4px 0;
    text-align: center;
    background-color: #ff821b;
    border-radius:0.3em;
    font-size:14px;
    color: #fff;
}
.list4 p{
    width:190px;
    background-image: url(../img/4.png);
    background-repeat: no-repeat;
    padding: 4px 0;
    text-align: end;
    font-size:24px;
    color: #0268b7;
    background-position:0 50%;
    font-weight: 700;
}
@media only screen and (max-width:1024px){
    header h1 img{
        margin-left: 5vw;
    }
    header .pc_nav{
        margin-right: 5vw;
    }
}
@media only screen and (max-width:768px){
	.pc_nav ul li{
		display: none;
	}
	.responsive_nav{
		display: block;
	}
	/*メニューボタン　展開前*/
.hambergar_menu {
    display : block;
    position: absolute;
    z-index: 5;
    right: 2vw;
    top: 30px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
    position: fixed;
}
.hambergar_menu span {
    display : block;
    position: absolute;
    width: 30px;
    height: 2px ;
    left: 6px;
    background: #0268b7;
    transition: 0.3s ease-in-out;
}
.hambergar_menu span:nth-of-type(1) {
    top: 10px;
}
.hambergar_menu span:nth-of-type(2) {
    top: 20px;
}
.hambergar_menu span:nth-of-type(3) {
    top: 30px;
}
/*メニューボタン　展開後*/
.hambergar_menu.active span:nth-child(1) {
    top: 16px;
    left: 6px;
    background :#fff;
    transform: rotate(-45deg);
}
.hambergar_menu.active span:nth-child(2),
.hambergar_menu.active span:nth-child(3) {
    top: 16px;
    background :#fff;
    transform: rotate(45deg);
}
/*スマホ用のメニュー*/
.responsive_nav{
    position: fixed;
    z-index: 2;
    top: 0;
    right:0;
    background-color:#0268b7;
    width: 45vw;
    height: 100vh;
    opacity: 0;
    transition: opacity .6s ease, visibility .6s ease;
}
.responsive_nav ul {
display: flex;
flex-direction:column;
align-items: center;
padding-top: 100px;
}
.responsive_nav ul li{
    transition: .4s all;
    border-bottom: 3px dotted #fff;
    width: 100%;
    text-align: center;
    list-style: none;
    font-size:12px;
    padding: 0;
    margin:5px 0;
    background-position: 10% 50%;
}
.responsive_nav ul li:last-of-type {
    padding-bottom: 0;
}
.responsive_nav ul li a {
    display: block;
    color: #fff;
    padding: 1em 0;
}
.responsive_nav.active {
    opacity: 1;
}
header .responsive_nav .list3{
    border-radius:0;
}
header .responsive_nav .list4{
    background-image: url(../img/7.png);
    background-repeat: no-repeat;
}
}
/*------------------------------------------------
                    トップビュー　
-------------------------------------------------*/
.topview{
    width: 100vw;
    display: flex;
    justify-content: center;
    background-color: #0268b7;
    padding-top: 30px;
}
.topview img{
    width: 100%;
    margin: 0 14.4vw;
}
/*----下層ページトップビュー----*/
.topview2{
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding-top: 30px;
}
.topview2 h2{
    position: absolute;
    width:100%;
    text-align: center;
    font-size: 24px;
    color: #fff;
}
.topview2 img{
    width: 100%;
}
@media only screen and (max-width:411px){
    .topview2 h2{
        font-size: 16px;
    }
}
/*------------------------------------------------
                    コンテンツ　
-------------------------------------------------*/
/*------ボタンコンテンツ、ボタン統一制御--------*/
.content1{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:50px 0;
    width: 100vw;
}
.content1 p{
    padding-bottom: 5px;
}
.btn{
    width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 55px;
    background-color: #ff821b;
    border-radius:0.3em;
    color: #fff;
    box-shadow: 0px 6px 14px -6px rgba(0,0,0,0.3);
}
.btn p{
    font-size: 20px;
}
.btn-wrapp:hover{
    opacity: 0.5;
}
.content1-1{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 0;
}
.content1-1 h3{
    margin-right: 1vw;
}
.content1-1 p{
    width: 180px;
    color: #ff821b;
    font-size: 24px;
    background-image: url(../img/42.png);
    background-repeat: no-repeat;
    background-position:0 60%;
    text-align: end;
}
.content1-1 .phone:hover{
    opacity: 0.5;
}
@media only screen and (max-width:768px){
    .btn{
        width: 50vw;
        height:45px;
    }
    .btn p{
        font-size: 14px;
    }
    .content1-1 p{
        width:125px;
    font-size: 16px;
    background-position:0 50%;
    }
}
@media only screen and (max-width:320px){
    .content1-1 h3{
        font-size: 12px;
    }
    .content1 p{
        font-size: 12px;
    }
}
/*------見出し統一制御(背景グレー）--------*/
.content2{
    width: 100%;
    background-color:#f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
}
.content2 .image{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 23vw;
}
.content2 .image img{
    width: 100%;
}
.content2 dl{
    width: 72vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.content2 dl dt{
    width: 100%;
    height: auto;
    color: #fff;
    background-color: #0268b7;
    font-size: 20px;
    text-align:start;
    padding: 10px 50px;
    background-image: url(../img/34.png);
    background-repeat: no-repeat;
    background-position:10px 50%;
}
.content2 dl dd{
    width: 100%;
    height: auto;
    background-color: #fff;
    font-size: 16px;
    text-align: start;
    padding: 10px 50px;
    background-image: url(../img/35.png);
    background-repeat: no-repeat;
    background-position:8px 25%;
}
.btn-wrapp{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 123px;
}
.btn2{
    position: absolute;
    top: -4px;
    left: -55px;
}
.content2 h2{
    color: #0268b7;
    font-size: 26px;
    margin-bottom: 20px;
}
.content2 h3{
    font-size: 24px;
    margin-bottom: 10px;
}
/*-----戻るボタン-------*/
#topbutton{
    display:none;
    position:fixed;
    right:15px;
    bottom:15px;
    opacity: 0.8;
    z-index: 3;
}
#topbutton img{
    width:100%;
    height: auto;
}
@media only screen and (max-width:768px){
    .content2 .image{
        margin: 0 13vw;
    }
    .btn-wrapp{
        height: 81.6px;
    }
    .btn2 img{
        width: 65%;
    }
    .content2 h2{
        font-size: 16px;
        margin-bottom: 10px;
    }
    .content2 h3{
        font-size: 12px;
    }
    .content2 dl{
        width: 90vw;
    }
    .content2 dl dt{
        font-size: 14px;
    }
    .content2 dl dd{
        font-size:12px;
    }
}
/*------漫画コンテンツ統一制御--------*/
.manga{
    width: 100vw;
    padding:0 23.4vw;
}
.manga ul{
    margin:30px 0;
}
.manga ul li{
    list-style: none;
    margin:10px 0;
}
.manga ul li img{
    width: 100%;
} 
@media only screen and (max-width:768px){
    .manga{
        padding: 0 11.7vw;
    }
}
/*------見出し統一制御(背景ブルー）--------*/
.content3{
    width: 100vw;
    background-color:#0268b7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
}
.content3 h2{
    text-align: center;
    color: #fff;
    font-size:26px;
    margin-bottom: 30px;
}
.content3 h2 img{
    margin-right: 15px;
}
.content3 .image{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 23vw;
}
.content3 .image img{
    width: 100%;
}
.content3 p{
    color: #fff;
    font-size: 16px;
    margin-bottom: 30px;
}
.content3-1{
    display: flex;
    justify-content: space-around;
}
.content3 .content3-1 .images1 img,
.content3 .content3-1 .images2 img,
.content3 .content3-1 .images3 img{
    width: 100%;
}
.content3 .content3-1 .images2{
    margin: 0 .75vw;
}
@media only screen and (max-width:768px){
    .content3{
        padding:30px 0;
    }
    .content3 h2 img{
        margin-right:10px;
        width: 50%;
        height: auto;
    }
    .content3 h2{
        font-size: 16px;
    }
    .content3 p{
        font-size:10px;
    }
    .content3 .image{
        margin: 0 13vw;
    }
    .content3 .content3-1{
        margin: 0 6vw;
    }
}
/*------動画コンテンツ制御--------*/
.douga{
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 50px 0 20px 0;
}
.douga h2{
    color: #0268b7;
    font-size: 26px;
    margin-bottom: 30px;
}
.dougawrapp{
    width: 80vw;
    display: flex;
    justify-content:space-between;
    flex-wrap: wrap;
    margin: 0 19.5vw;
}
.dougawrapp .douga-container{
    display: flex;
    flex-direction: column;
    width: 45%;
    min-height:16.4vw;
    align-items: center;
    margin:0 0 30px 0;
}
.dougawrapp .douga-container p{
    text-align: center;
    color: #0268b7;
    margin-bottom: 10px;
}
.dougawrapp .douga-container iframe{
    width: 100%;
    height: 100%;
}
@media only screen and (max-width:1024px){
    .dougawrapp{
        margin: 0 10vw;
    }
}
@media only screen and (max-width:768px){
    .douga h2{
        font-size:16px;
    }
    .dougawrapp{
        flex-flow: column nowrap;
        align-items: center;
    }
    .dougawrapp .douga-container{
        min-width: 85%;
    }
}
/*------下層ページコンテンツ制御--------*/
.kasoucontents{
    width: 80vw;
    margin: 50px 0;
}
.kasoucontents .kasou1{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.kasoucontents h3{
    font-size: 16px;
    margin-bottom: 50px;
}
.kasoucontents dl{
    padding:0 15px;
}
.kasoucontents dl dd{
    font-size: 14px;
    margin-bottom: 10px;
    line-height: 29px;
}
.kasoucontents dl dt {
    font-size: 20px;
    margin-bottom: 10px;
}
.kasoucontents dl dd ul li{
    list-style: none;
}
@media only screen and (max-width:768px){
    .kasoucontents{
        width: 90vw;
    }
    .kasoucontents p{
        font-size: 14px;
    }
    .kasoucontents dl dt{
        font-size: 14px;
    }
    .kasoucontents dl dd{
        font-size: 12px;
        line-height: 27px;
    }
}
/*----追加コンテンツ----*/
.tuika{
    width: 100vw;
}
.tuika h2{
    text-align: center;
    background-color:#0268b7;
    font-size: 26px;
    padding: 2.08vw 0;
    color: #fff;
    margin-bottom: 2.08vw;
}
.tuika h2 img{
    min-width: 10.2vw;
}
.tuika h3{
    text-align: center;
    font-size: 26px;
    color: #0268b7;
    margin-bottom: 1.56vw;
}
.tuika .contena{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
    min-width: 60vw;
    max-width: 60vw;
}
.tuika .contena .tuika_img{
    margin-right:0.52vw;
    margin-bottom: 2.08vw;
    width:  27.39vw;
}
.tuika .contena .tuika_img img{
    width:100%;
    height: auto;
}
@media only screen and (max-width:768px){
    .tuika h2,
    .tuika h3{
        font-size: 16px;
    }
    .tuika h2 img{
        width: 16vw;
    }
    .tuika .contena{
        min-width: 80vw;
        max-width: 80vw;
    }
    .tuika .contena .tuika_img{
        width:48%;
    }
}
@media only screen and (max-width:400px){
    .tuika .contena .tuika_img{
        margin-right:0px;
        width:100%;
    }
}
/*------------------------------------------------
            お問い合わせ設定（bownow制御）
-------------------------------------------------*/
.toiawase{
    width: 80vw;
    margin:100px auto 50px auto;
}
.content2 .inquiryname{
    margin-top: 20px;
}
@media only screen and (max-width:768px){
    .content2 .toiawase{
        width: 90vw;
    }
    .content2 .inquiryp{
        display: flex;
        width: 80vw;
    }
}
@media only screen and (max-width:400px){
    .content2 .inquiryp p{
        font-size: 12px;
    }
}
/*------------------------------------------------
                    送信完了ページ
-------------------------------------------------*/
.thankspage{
    height: 100%;
}
.kasoucontents .kasou3{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.kasoucontents .kasou3 p{
    font-size: 18px;
    line-height: 2em;
}
.kasoucontents .kasou3 .btn{
    margin-top: 5vw;
}
.kasoucontents .kasou3 .btn:hover{
    opacity: 0.5;
}
@media only screen and (max-width:540px){
    .kasoucontents .kasou3 p{
        font-size: 14px;
    }
}
/*------------------------------------------------
                    フッター
-------------------------------------------------*/
footer p,
footer li{
    font-size: 14px;
}
@media only screen and (max-width:375px){
    footer p,
footer li{
    font-size: 12px;
}
}
footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
    background-color:#025ca3;
    height: 165px;
    width: 100vw;
    position: relative;
    color: #fff;
}
footer ul{
    list-style: none;
    display: flex;
    justify-content: center;
    margin:15px;
}
footer ul li{
    margin:0 1vw;
}
footer .copy{
    position: absolute;
    bottom: 0;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 65px;
    background-color: #015798;
}
/*-----送信完了ページ限定-------*/
.footer2{
    position: absolute;
    bottom: 0;
}
@media only screen and (max-width:768px){
    footer .footer1 p{
        font-size: 10px;
    }
}