@charset "utf-8";
.shuwapr{
	font-weight:bold;
}
.backgroundbule{
    width:100%;
	padding-top:0vw;
    position:relative;
}
.backgroundh2{
    position:absolute;
	padding-top:6vw;
    z-index:10;
    color:white;
}
.backgroundh2 h2{
    margin:0;
    left:50px;
    font-size:5vw;
    text-shadow:1px 3px 1px rgba(0,0,0,70%);
}
.title{
    position:absolute;
    top:80%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:10;
    width:100%;
    text-align:center;
    color:white;
}
.title h2{
    width: 100%;
    font-size: 6vw;
    text-shadow:2px 2px 4px rgba(0,0,0,1);
}

.trackimge{
    width:100%;
    height: 50vw;
    position:relative;
    z-index:1;
}
.trackimge img{
    width: 100%;
    height: 100%;
    object-fit: cover;
} 
.rakuraku{
    position:absolute;
    top:40%;
    left:85%;
    transform:translate(-50%,-50%);
    z-index:10;
    width:17%;
    text-align:center;
    color:white;
}
.rakuraku img{
    width:100%;
}

.backgroundblue2{
    position: relative;
	margin-top:5vw;
}
.nayami1{
    width: 100%;
    height: auto;
}


.nayami1 p{
    width:83%;
    font-size:4vw;
    font-weight: bold;
    color:#474747;
}

.nayami1 img{
    width:30%;
    float:right;
}


.nayami2{
    width: 100%;
}


.nayami2 p{
    width:53%;
    margin-top:-3vw;
    font-size:4vw;
    font-weight: bold;
    color:#474747;
    float:right;
}

.nayami2img{
    width:40%;
    float:left;
}
.nayami2 img{
    width: 30%;
    margin-top:10vw;
}

    .shuwapr{
        position: relative;
        width: 100%;
        background-color:#2C71FB;
        z-index: 9;
        padding-bottom:14vw;
        margin-top:14vw;
    }
    .shuwapr h1{
        width:80%;
        font-size:5vw;
        color: white;
        margin:0 auto 0 auto ;
        text-align: center;
        padding:8vw 0 0 0;
        white-space: nowrap;
        
        /* border-bottom: ; */
    }
    .boders{
        position: absolute;
        width:62%;
        margin:0 20% 0 20% ;
        height: 5px;
        background-color:white;
        z-index:11;
    }
    .des{
        display: none;
    }

    .sacle1{
        position: absolute;
        margin:-2vw 0 0 75vw;
        border-radius: 13vw;
        width: 24vw;
        height: 24vw;
        z-index: 10;
        background-color:rgba(255,255,255,10%)
    }
    .sacle2{
        position: absolute;
        margin:53vw 0 0 0vw;
        border-radius: 13vw;
        width: 25vw;
        height: 25vw;
        z-index: 11;
        background-color:rgba(255,255,255,10%)
    }
    .sacle3{
        position: absolute;
        margin:100vw 0 0px 73vw;
        border-radius: 13vw;
        width: 25vw;
        height: 25vw;
        z-index: 13;
        background-color:rgba(255,255,255,10%)
    }
    
    .PR1{
/*         width: 100%; */
        color:white;
        font-size: 3vw;
        margin:7vw 10% 0 10%;
    }
    .PR1 h1{
        width:80%;
        margin:1vw auto;
		
        }

.PR h2{
    width:100%;
}

    .patoeri h1{
        margin:0 auto;
    }
.QESTION{
    width:80%;
    height:8vw;
    margin:10vw auto 0 auto ;
    background:black;
}

.QESTION a{
    width:100%;
    height:100%;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:3vw;
    color:#ffff;
    text-decoration:none;
    overflow:hidden;
}

/* 文字 */
.QESTION a span{
    position:relative;
	color:white;
    z-index:10;
}

.QESTION a:hover{
    color:#ffffff;
    transition: 1s;
}

/* 共通 */
.QESTION a::before,
.QESTION a::after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    background:#ff0000;
    color:white;
    transition:1s ease;
    z-index:1;
    
}
/* 左上 */
.QESTION a::before{
    top:0;
    left:0;
    top:1px;
    left:1px;
    clip-path:polygon(0 0, 100% 0, 0 100%);

    transform:translate(-100%, -100%);
}

/* 右下 */
.QESTION a::after{
    right:0;
    bottom:0;
    right:1px;
    bottom:1px;
    clip-path:polygon(100% 100%, 100% 0, 0 100%);
    transform:translate(100%, 100%);
}
/* hover */
.QESTION a:hover::before{
    transform:translate(0,0);
    color:white;
}
.QESTION a:hover::after{
    transform:translate(0,0);
    color:white;
}

.patocan{
    padding:3vw;
    position:relative;
    width:100%;
    z-index:10;
}

.patoeri{
    display: flex;
    position: absolute;
/*     width: 100%; */
    align-items: center;
    /* height: 5vw; */
    /* background-color: #ff0000; */
    text-align: center;
    z-index: 11;
}

.patoeri h1{
    display: flex;
    width: 100%;
    align-items: center;
    /* height: 5vw; */
    /* align-items: center;
    justify-content:center; */
    /* background-color: #474747; */
    font-size:2vw;
    color: #474747;
    border-bottom: 4px solid #474747;
}

.eria{
    position: absolute;
    width: 25%;
    text-align: center;
    right:  15vw;
    top:20vw;
    color: #474747;
    border: 1px solid;
    /* background-color: #2C71FB ; */
    z-index: 11;
}
.eria h1{
    width: 100%;
    margin: 0 auto; 
    font-size:2vw;       
}

.eria h2{
    width: 100%;
    margin: 0 auto;
    font-size: 1vw;
}
.japan{
    width:50%;
    /* position: relative;
    width:50%;
    height:50vw;
    margin-top:8vw;
    display:flex;
    align-items:center;
    justify-content:center;  */
}



.japan img{
    width:100%;
    height:auto;
    display:block;
    margin-top:10vw;
    /* width:90%;
    padding-top: 5vw;
    height:40vw; */
}
.QA{
    clear:both;
    width:82%;
    height: 79vw;
    margin:0 auto 0 auto;
    background-image:url("../images/patrol/yukki.png");
    background-size: cover;      /* 要素いっぱいに表示 */
    background-position: center; /* 中央配置 */
    background-repeat: no-repeat;/* 繰り返しなし */
}

.QAh1{
	width:100%;
	height:2vw;
    text-align: center;
    font-size:5vw;
	font-weight:bold;
}

.QP{
    width: 90%;
	height:87vw;
	margin:0 auto;
	padding-top:10vw;
}

.QP p{
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    font-size: 2vw;
    margin: 0 auto;
    
}

.QPW{
    width: 95%;
    margin: 10vw auto;
    border:1px solid #2e2e2e;
    background-color: #fff;
    font-weight: bold;
	padding-top: 2vw;
    padding-bottom: 2vw;

}

.btn010 {
    position: fixed;
    margin: 0 auto;
    padding-left: 2vw;
    display: flex;
    right: 1vw;
    top:15vw;
    align-items: center;
    width: 15%;
/*     max-width: 16vw; */
    height: 3vw;
    color: white;
    background-color: #2C71FB;
    border-radius: 2vw;
    border: 1px solid white;
    font-size: 1vw;
    font-weight: bold;
    transition: all 0.3s ease;
    z-index: 11;
}
/* 矢印全体を包む枠 */
.btn010-arrow {
    position: absolute;
    top: calc(50% - 10px);
    right: 12px;
    display: inline-block;
    width: 30px;
    height: 20px;
    overflow: hidden;
}
/* 基本の矢印バー */
.btn010-arrow .arrow {
    position: absolute;
    top: 50%;
    left: calc(50% - 11px);
    width: 20px;
    height: 1px;
    background-color:white;
    transform: translateY(-50%);
    opacity: 1;
}
/* 矢印先端（→） */
.btn010-arrow .arrow::after {
    content: '';
    position: absolute;
    top: calc(50% - 3px);
    right: 0px;
    width: 6px;
    height: 6px;
    border-top: 1px solid white;
    border-right: 1px solid white;
    transform: rotate(45deg);
}
/* 初期位置調整 */
.btn010-arrow .arrow01 {
    transform: translateY(-50%) translateX(0); /* 中央に表示 */
    z-index: 2;
}
.btn010-arrow .arrow02 {
    transform: translateY(-50%) translateX(-150%); /* 左外に配置 */
    z-index: 1;
}
/* ホバー時のアニメーション発火 */
.btn010:hover .arrow01 {
    animation: arrow-slide-out 0.5s ease;
}
.btn010:hover .arrow02 {
    animation: arrow-slide-in 0.5s ease;
}
/* アニメーション定義 */
@keyframes arrow-slide-out {
    0% {
        transform: translateY(-50%) translateX(0);
    }
    100% {
        transform: translateY(-50%) translateX(150%);
    }
}
@keyframes arrow-slide-in {
    0% {
        transform: translateY(-50%) translateX(-150%);
    }
    100% {
        transform: translateY(-50%) translateX(0);
    }
}

.wpcf7-form{
	width:100%;
	background-color:#434343;
	color:white;
	font-size:3vw;
/*     margin: 12vw 0 0 0; */
	padding:3vw 0 3vw 0;
}

.wpcf7-form label{
	margin:4vw 0 0 0;
}

.wpcf7 .submit-btn:disabled{
    cursor: not-allowed;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 5vw auto 0 auto;
    max-width: 30vw;
    padding: 10px 25px;
    color: #543618;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #eeee;
    border-radius: 50px;
    border: 0.2rem solid #543618;
    box-shadow: 0.2rem 0.2rem 0px 0.1rem #cccccc;
}

.submit-btn:not(:disabled){
    width: 100%;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 5vw auto 0 auto;
    max-width: 30vw;
    padding: 10px 25px;
    color: #543618;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #eeee;
    border-radius: 50px;
    border: 0.2rem solid #543618;
    box-shadow: 0.2rem 0.2rem 0px 0.1rem #cccccc;
}

.submit-btn:not(:disabled):hover{
    transform: translate3d(0.2rem, 0.2rem, 0);
    box-shadow: none;
    opacity: 1;
    transition: all 0.2s;
}

.toiawase{
	width:70%;
	margin:0 auto;
}
.toiawase .wpcf7-list-item label{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:15px;
}
.toiawase input[type="checkbox"]{
	
	transform: scale(4.5);
	margin-right: 1vw
}

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

	
.rakuraku{
		position: absolute;
        width: 48%;
        left: 75vw;
        top: 60vw;
        margin: 0 0 0 0;
        z-index: 10;
        right: 0;
	}
	
	
.toiawase input[type="text"],
.toiawase input[type="email"],
.toiawase input[type="email"],
.toiawase input[type="tel"]{
    width:100%;
    height:40px;
    box-sizing:border-box;
}
.toiawase input[type="textarea"]{
    width:100%;
	height:60px;
}
    body{
        width:100%;
        margin:0;
    }

    /* 髱定レ譎ｯ */
    .backgroundbule{
        position:relative;
        width:100%;
        height:230vw;
        margin:0;
        overflow:hidden;
        background-color:rgb(44,113,251);
    }

    /* 繧ｿ繧､繝医Ν */
    .backgroundh2{
        width:100%;
        position:relative;
        top:23px;
        left:10px;
        color:white;
        font-weight:bold;
        z-index:10;
        text-shadow:2px 2px 4px rgba(0,0,0,1);
    }
	
	.backgroundblue2{
         margin-top:0;
	
	}

    .backgroundh2 h2{
        margin-top:20px;
        font-size:7vw;
    }
    /* 逋ｽ縺?蟾ｨ螟ｧ讌募?? */
    .backgroundwhite{
        position: absolute;
        width: 300%;
        height: 155vw;
        right: -160%;
        top: 145px;
        background: white;
        border-radius: 50%;
        z-index: 2;
    }

    /* 逕ｻ蜒丞?ｨ菴? */
    .trackimge{
        position: absolute;
        width: 139%;
        height: 50%;
        left: -120px;
        top: 230px;
        overflow: hidden;
        z-index: 5;
        clip-path: ellipse(60% 51% at 56% 49%);
    }

    /* 逕ｻ蜒? */
    .trackimge img{
        width: 130%;
        height: 100%;
        object-fit: cover;
        object-position: left center;
        display: block;
    }
    .rakuraku{

		
    }
    .rakuraku img{
        width:100%;

    }
    .title{
        position: absolute;
        /* font-size: 25px; */
        top: 180vw;
        color: white;
        text-shadow: 2px 2px 4px rgba(0, 0, 0,1);
    }
    .title h2{
        font-size:10vw;
        float:left;
        text-align: left;
    }

    .backgroundblue2{
        width: 100%;
        height: 120vw;
        background-color:rgb(44,113,251);
    }
    .circle{
        width:35%;
        position:relative;
        top:10px;
        float:left;
        z-index: 10;
    }
    .circle img{
        width:100%; 

    }
    .text{
        width:10%;
        float:right;
        font-size:25px;
        text-align: right;
        color: white;
    }


    .nayami1 img{
        float:left;
    }


    .nayami1 p{
        width:100%;
        color: white;
        text-align: right;
        margin: 0;
        font-size: 6vw;
        font-weight: bold;
    }

    .nayama2img{
        width: 100%;
        margin-top:-1vw;
        float: left;
    }

    .nayami2 img{
        width: 30%;
        margin:0px;
        float: right;
    }

    .nayami2 p{
        width:100%;
        margin:4vw 0 0 0;
        color: white;
        text-align: left;
        font-size: 6vw;
        font-weight: bold;

    }
    .boders{
        width:80%;
        margin: 0 10%;
        height: 1px;
        background-color:#474747;
    }
    .shuwapr{
        margin:7vw 0 0 0;
        background-color:white;
    }
    .shuwapr h1{
        width:100%;
        margin:0 auto;
        background-color:white;
        text-align: center;
        font-size:7vw;
        color: #474747;
        white-space:normal;
    }


    .PR1{
        width: 90%;
        margin:10vw auto;
        font-size:4vw;    
        color:#474747;    
    }
    
  
    .sacle1{
        position: absolute;
        width: 50vw;
        height: 50VW;
        /* float:right; */
        /* text-align: right; */
        margin:-15vw 0 0 49vw;
        border-radius: 25vw;
        background-color: rgba(0,51,255,10%);
        z-index: 1;
    }
    .sacle2{
        position: absolute;
        width: 50vw;
        height: 50VW;
        /* float:right; */
        /* text-align: right; */
        margin:80vw 0vw 0vw -5vw;
        border-radius: 25vw;
        background-color: rgba(0,51,255,10%);
        z-index: 1;
    }
    .sacle3{
        position: absolute;
        width: 50vw;
        height: 50VW;
        /* float:right; */
        /* text-align: right; */
        margin:190vw 0vw 0vw 48vw;
        border-radius: 25vw;
        background-color: rgba(0,51,255,10%);
        z-index: 1;
    }
.QESTION{
    width:60%;
    height:10vw;
    background:#474747;
/* 	color:white; */
    position:relative;
    overflow:hidden;

    margin:0 auto;

    border-radius:0.5vw;
    border-bottom:0.4vw solid #2e2e2e;
    
}

.QESTION a{
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    text-decoration:none;
    position:relative;
    font-size:2vw;
    font-weight:bold;
    z-index:1;
    transition:0.3s;
}
/* hover */
.QESTION a:hover{
    background:#2C71FB;
}

/* 光 */
.QESTION a::before{
    content:"";
    position:absolute;

    top:-60%;
    left:-60%;

    width:35%;
    height:250%;

    background:linear-gradient(
        to right,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.015) 35%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0.015) 65%,
        rgba(255,255,255,0) 100%
    );

    transform:rotate(28deg);

    filter:blur(28px);

    opacity:0.9;

    animation:shine 3s infinite;
}
.patocan{
	width:100%;
    padding:0;
    padding-top:10vw;
    padding-bottom: 10vw;
    /* padding: 0 0 10 0vw; */
    background-color:#2C71FB;
    
}
	
	.patoeri{
		width:100%;
		text-align:center;
	}	
	
.patoeri h1{
	width:80%;
    color:white;
    border-color:white;
    border-bottom:2px solid #ffffff;
    font-size:5vw;
    text-align:center;
}
picture{
    width: 100%;
}

.japan {
     width:80%;
    margin:0 auto;
    padding-top:10vw;
}
.japan img{
  width:100%;
    height:auto;
    display:block;
    margin:0 auto;
 
 
}


.eria{
    width:90%;
    margin:10vw auto 0 auto;
    /* padding: 0 0 0 10vw; */
    color:#fff;
    position:static;
    border:2vw solid;
}

.eria h2{
    font-size:8vw
}


.eria h1{
    font-size:10vw;
}

.QA{
	margin:15vw 0 0 0;
    clear: both;
	    background-image:url("../images/patrol/yukki.png");
	width: 100%;
        height: 160vw;
}
	
	

/* 押した時 */
.QESTION a:active{
    transform:translateY(4px);
}
.QP{
    width: 90%;
	height:153vw;
	padding-top:10vw;
	margin:0 auto

}

.QP p{
    width:100%;
    font-size: 6vw;
    margin:0;
}

.QPW{
    width: 100%;
    margin: 9vw auto;
}
	
	
.toiawase input[type="checkbox"]{
	
	transform: scale(1.5);
	margin-right: 1vw
}
	
.wpcf7-form{
	width:100%;
	background-color:#434343;
	color:white;
	font-size:5vw;
/*     margin: 80vw 0 0 0; */
	padding:3vw 0 3vw 0;
}

.wpcf7-form label{
	margin:4vw 0 0 0;
	line-height:1.8;
}

.toiawase{
	width:70%;
	margin:0 auto;
	
}	

	.wpcf7 .wpcf7-submit:disabled{
	cursor: not-allowed;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 10px 25px;
    color: #543618;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #eeee;
    border-radius: 50px;
    border: 0.2rem solid #543618;
    box-shadow: 0.2rem 0.2rem 0px 0.1rem #cccccc;
	}
	
	.wpcf7 .submit-btn:disabled{
    cursor: not-allowed;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 5vw auto 0 auto;
    max-width: 30vw;
    padding: 10px 25px;
    color: #543618;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #eeee;
    border-radius: 50px;
    border: 0.2rem solid #543618;
    box-shadow: 0.2rem 0.2rem 0px 0.1rem #cccccc;
}

.submit-btn:not(:disabled){
    width: 100%;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 5vw auto 0 auto;
    max-width: 30vw;
    padding: 10px 25px;
    color: #543618;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #eeee;
    border-radius: 50px;
    border: 0.2rem solid #543618;
    box-shadow: 0.2rem 0.2rem 0px 0.1rem #cccccc;
}

.submit-btn:not(:disabled):hover{
    transform: translate3d(0.2rem, 0.2rem, 0);
    box-shadow: none;
    opacity: 1;
    transition: all 0.2s;
}
	
	
	
	
	
/* 	.wpcf7 .wpcf7-submit:hover{
	transform: translate3d(0.2rem, 0.2rem, 0);
   box-shadow: none;
  opacity: 1;
  transition: all 0.2s;
	}
	.wpcf7 .wpcf7-submit:after{
	content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #543618;
    border-right: 3px solid #543618;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
	} */
.toiawase textarea{
	width:100%;
}
.toiawase input[type="checkbox"]{
    zoom: 1.8;
}
.btn010 {
    padding-left: 2vw;
    display: flex;
    right: 1vw;
    top:15vw;
    align-items: center;
    width: 100%;
    max-width: 45vw;
    height: 12vw;
    color: white;
    background-color: #2C71FB;
    border-radius: 2vw;
    border: 1px solid white;
    font-size:3vw;
    font-weight: bold;
    transition: all 0.3s ease;
    z-index: 15;
}
/* 光 */
@keyframes shine{

    0%{
        left:-40%;
    }

    30%{
        left:140%;
    }

    100%{
        left:140%;
    }
}
@media screen and (min-width:769px){
.title h2 br{
    display: none;
}

.nayami1 p br{
    
    display: none;
}
.nayami2 p br{
    display: none;
}

.patoeri{
    display: none;
}

	
	.wpcf7-form{
		margin:60vw 0 0 0 ;
	
	
	}
	

/* 
.shuwapr p br{
    /* display: none; */
}
    
}