@charset "utf-8";

/* SP用設定 */

@media ( width < 768px ) {
    
	section {
		overflow-x: hidden;
	}
    .frame {
        margin: 0 auto;
        width: 90%;
    }
    
    .spnone {
        display: none!important;
    }

	header .logo img {
    	width: 172px;
    	height: auto;
	}	
    header ul.h_btns {
		display: flex;
		justify-content: flex-end;
	}
	header ul.h_btns li {
		list-style: none;
	}
	header ul.h_btns li a {
		display: flex;
		align-items: center;
		height: 60px;
		padding: 0 min(2.25vw,15px);
	}
	header ul.h_btns li a img {
		width: 40px;
		filter: brightness(0) saturate(100%) invert(92%) sepia(6%) saturate(4962%) hue-rotate(138deg) brightness(92%) contrast(77%);
	}	
	header ul.h_btns li:nth-of-type(1) a {
		background: #0095ce;
	}
   	header ul.h_btns li:nth-of-type(1) a img {
		filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(195deg) brightness(107%) contrast(101%);
	}
	
	.mv.mv_pc {
		display: none;
	}
	.mv_sp_fg {
		position: relative;
	}
    .mv.mv_sp .mv-bg {
        aspect-ratio: 4/3;
    }
    .mv.mv_sp .mv-bg img {
        height: auto;
    }	
	.mv_sp_end {
		position: relative;
	}
    .mv_sp_end_time {
        padding: 6px 3vw;
        background: #fff;
    }
    .mv_sp_end_time_text {
        margin: 2px 0 0 1vw;
        font-size: 2.5vw;
    }

    footer {
        margin-bottom: 510px;
    }
    .f_bnr_ul {
        width: 90%;
        margin: 0 auto;
    }
    .f_bnr_ul_li {
        margin-bottom: 20px;
    }
    
    .top_title {
        margin: 30px 0 15px;
		color: #1d4552;
        font-size: min(7.5vw,32px);
        font-weight: 500;
		font-family: var(--font-mincho);
        text-align: center;
    }
    
    .top_cta {
        padding: 20px 5vw 5px;
        background: linear-gradient( to bottom, #fff, #f2f2f2 );
        border: 2px solid #0286b5;
        border-radius: 4px;
        text-align: center;
    }
    .top_cta_text {
        display: inline-block;
        margin-bottom: 15px;
        padding: 0 0 10px;
        border-bottom: 2px solid #0286b5;
        color: #0286b5;
        font-size: min(6.66vw,28px);
        font-weight: bold;
        text-align: center;        
    }
    .top_cta_btn {
        width: 80%;
        max-width: 300px;
        margin: 0 auto 15px;
    }
    
    .points_slider,
    .flow_slider,
	.bnr_slider {
		position: relative;
        margin: 0 0 60px;
    }
	.bnr_slider .swiper-wrapper {
 	   transition-timing-function: linear;
	}
    .points_slider .box {
        margin: 0 2.5vw;
        padding: 15px 5px 10px;
        background: #e5f9fb;
		border-radius: 15px; 
		box-shadow: 6px 6px 2px rgba(0,0,0,.1);
    }
	.points_slider .box .texts {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1vw 3vw 0;
	}
	.points_slider .box .num {
		font-size: min(12.5vw,80px);
		color: #03aec1;
		text-shadow: 0 0 10px #fff;
	}
    .points_slider .box .text {
        font-size: min(4.75vw,23px);
        font-weight: 500;
        text-align: right;
		color: #2b9ac3;
		text-shadow: 0 0 10px #fff;
    }
	.points_slider .box .pic img {
		margin: auto;
		width: auto;
		height: min(33vw,242px);
	}
    .flow_slider .box {
        border: 3px solid #64cac5;
        margin: 40px 2.5vw 0;
        padding: 0 2vw 30px;
        background: #fffefa;
        border-radius: 15px;
    }
    .flow_slider .step {
        position: relative;
        top: -20px;
        left: calc(50% - 100px);
        width: 200px;
        padding: 3px;
        background: #64cac5;
		border-radius: 30px;
        color: #fff;
        font-size: 22px;
        font-weight: bold;
		font-family: var(--font-mincho);
        text-align: center;
    }
    .flow_slider .text {
        display: flex;
        justify-content: center;
        align-items: center;
        height: min(8vw,40px);
        margin-bottom: 20px;
		color: #345862;
        font-size: min(4.75vw,23px);
        line-height: 1.375;
        text-align: center;
    }
	.flow_slider .pic img {
		margin: auto;
		width: auto;
		height: min(31.5vw,235px);
	}
	.information .pic {
		margin: 0;
	}
	.bnr_slider {
		width: 111.11%;
		margin-left: -5.55%;
	}
	.bnr_slider .pic {
		padding: 4vw;
	}
	.bnr_slider .pic img {
		border: 1vw solid #fff;
		box-shadow: 1vw 1vw 5px rgba(0,0,0,.1);
	}
	
	.swiper-pager {
		position: absolute;
		bottom: -42px;
		left: 0;
		width: 100%;
	}
	.swiper-pager .swiper-pagination-bullet {
		background: #eee;
		border: 1px solid #333;
	}
	.swiper-pager .swiper-pagination-bullet.swiper-pagination-bullet-active {
		background: #0286B5;
	}	
	.swiper-button {
		position: absolute;
		bottom: -25px;
		left: 0;
		width: 100%;		
	}
	.bnr_slider .swiper-button {
		display: none;
	}
	.swiper-button .swiper-button-prev {
		left: calc(50% - 80px);
	}
	.swiper-button .swiper-button-next {
		left: auto;
		right: calc(50% - 80px);		
	}	
	.swiper-button .swiper-button-prev::before,
	.swiper-button .swiper-button-next::before {
		position: absolute;
		display: block;
		content: "";
		top: 12px;
		left: calc(50% - 10px);
		width: 20px;
		height: 20px;
		background: #fff;
		border: 1px solid #888;
		border-radius: 50%;
	}	
	.swiper-button .swiper-button-prev::after,
	.swiper-button .swiper-button-next::after {
		z-index: 9;
		font-size: 10px;
		color: #000;
	}
    
    
}


/* PC用設定 */

@media ( width >= 768px ) {

    .frame {
        margin: 0 auto;
        width: 90%;
        max-width: 1100px;
    }
    
    .pcnone {
        display: none!important;    
    }
    
    .mv.mv_sp,
	.mv_sp_fg,
	.mv_sp_end {
		display: none;
	}

    .f_bnr_ul {
        max-width: 1000px;
        margin: 40px auto 0;
        display: flex;
        justify-content: space-between;
    }
    .f_bnr_ul_li {
        width: 47.5%;
    }
    
    .contact-box {
        margin-bottom: 45px;
    }
    .contact-box .btn {
        margin: 20px auto 5px;
        width: 30%;
    }	
    
}
@media ( width >= 1200px ) {
	
	.calendar-box iframe {
		aspect-ratio: 480 / 550;
	}

}

.tab_set {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
	gap: 0 1%;
}
.tab_label {
	width: 49.5%;
    color: #555;
    background: #f0f4f9;
	border: 1px solid #5ed3ce;
	border-bottom: none;
	border-radius: 5px 5px 0 0;
	box-sizing: border-box;
    padding: 10px 20px;
    order: -1;
    position: relative;
    line-height: 1.4;
    cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	transition: .5s;
}
.tab_content {
	width: 100%;
	overflow: hidden;
	opacity: 0;
	height: 0;
}
.tab_content .inner {
	border: 1px solid #5ed3ce;
	padding: 0 10px;
}
.tab_content .inner iframe {
	width: 100%;
	height: 188px;
	border: none;
}
.tab_switch2:checked+.tab_label,
.tab_switch:checked+.tab_label {
    background: #089ead;
	color: #fff;
}
.tab_switch2:checked+.tab_label+.tab_content,
.tab_switch:checked+.tab_label+.tab_content {    
	overflow: auto;
	transition: .5s opacity;
	opacity: 1; 
	height: auto;
}
.tab_switch2,
.tab_switch {
    display: none;
}

@media print,screen and (min-width:768px) and (max-width:1200px) {
	
	.tab_label, 
	.tab_label_sp {
		padding: 1vw 2vw;
		font-size: 1.6vw;
	}	
	.calendar-box iframe {
		aspect-ratio: auto;
		height: 39.5vw;
	}	
	
}
@media print,screen and (max-width:767px) {
	
	.apotool.for_sp {
		padding: 0 3vw;	
	}	
    .tab_label {
		font-size: min(4vw,15px);
		padding: 10px 0;
    }
	.tab_content .inner {
		padding: 0;
	}
	.tab_content .inner iframe {
		width: 100%;
		height: max(215px,33vw);
	}	
    .travelclinic .tab_label.last {
        border-bottom: none;
    }
    .travelclinic .tab_switch:checked+.tab_label {
        border-bottom: 1px solid #59A8B7;
    }
	
}