@charset "utf-8";
body {
	font: normal 18px/1.7 "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Arial,Verdana,sans-serif;
	text-align: left;
	color:#333;
	text-align: justify;
	overflow-x: hidden;
}


body .sp-item {
    display: none !important; }
  body .pc-item {
    display: block !important; }

  @media screen and (max-width: 640px) {
    body {
      min-width: inherit;
	  height:100%;
	  }
      body .sp-item {
        display: block !important; }
      body .pc-item {
        display: none !important; }
	  body .sp-item img {
		width:100%;}
}

@media screen and (max-width: 640px) {
	.sp img{
		max-width:90%;
}
	.sp02 img{
		max-width:100%;
}
.sp03 img{
		max-width:70%;
}
}
.ov_hd {
	overflow: hidden;
}
.bg_none {
	background-image: none!important;
}
.rollover:hover {
	filter: brightness(1.05);
}
.center {
	text-align: center;
}
.right {
	text-align:right;
}
.line_0 {
	line-height: 0;
}
.zindex {
	z-index: 200;
}
input[type=radio] {
	width: 15px;
	height: 15px;
	vertical-align: middle;
}
input[type=image]:hover{
		opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	}
/* ----------------------------------------------------

    ここから書く

---------------------------------------------------- */
/*共通*/
.sec {
	padding-bottom: 40px;
}
.sec-wrap {
	width: 640px;
	max-width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	box-shadow: 0px 0px 15px -5px #ccc;
	background-color: #fff;
}
img {
	width: 100%;
}
.pink {
	color: #E73645;
}
.yellow-line {
	background: linear-gradient(transparent 0%,#FFFFDD 0%);
}
@media screen and (max-width: 640px) {
	.sec {
		padding-bottom: 20px;
	}
	.sec-wrap {
		width: 100%;
	}
}
/* ----------------------------------------------------
sec1 メインビジュアル
---------------------------------------------------- */

/* ----------------------------------------------------
sec2
---------------------------------------------------- */

/* ----------------------------------------------------
sec3
---------------------------------------------------- */

/* ----------------------------------------------------
sec4
---------------------------------------------------- */

/* ----------------------------------------------------
sec5
---------------------------------------------------- */
.sec5 h2 img {
	margin-top: -5%;
}
/* ----------------------------------------------------
sec6
---------------------------------------------------- */
.sec6 p img {
	margin-top: -1px;
}
/* ----------------------------------------------------
sec7
---------------------------------------------------- */
.sec7 p img {
	margin-top: -1px;
}
/* ----------------------------------------------------
sec8
---------------------------------------------------- */
/* ----------------------------------------------------
sec9
---------------------------------------------------- */
/* ----------------------------------------------------
sec10
---------------------------------------------------- */
/* ----------------------------------------------------
sec11
---------------------------------------------------- */
.sec11 p img {
	margin-top: -1px;
}
/* ----------------------------------------------------
sec12
---------------------------------------------------- */
/* ----------------------------------------------------
sec13
---------------------------------------------------- */
.sec13 {
	background-color: #F7F4F2;
}
.sec13 h2 {
	padding-bottom: 20px;
}
.slider{
	width:100%;
	margin:0 auto;
	
}
.slider img{
	width:100%;
}
.slider .slick-slide{
	height:auto!important;
}
.slider .slick-arrow{
	z-index:2!important;
}
.slider .slick-next{
	right:0!important;
}
.slider .slick-prev{
	left:0!important;
}
.slider .slick-slide{
	margin-right: 1vw!important;
	margin-left: 1vw!important;
}

.slick-dots li button:before {
	font-size: 10px!important;
}
.slick-dotted.slick-slider {
	margin-bottom: 0!important;
	padding-bottom: 50px!important;
}
.slick-dots {
	bottom: 20px!important;
}
/* ----------------------------------------------------
sec14
---------------------------------------------------- */
.sec14 h2 {
	padding-bottom: 20px;
}

.accordion-box {
	max-width: 640px;
	padding: 2%;
  margin:0 auto;
}

.details-summary {
	position: relative;
	display: block;
	padding: 20px 10% 20px 2%; 
	color: #000;
	font-size: 24px;
	font-weight: bold;
	text-align: left;
	background-color: #F2F2F2;
	margin-bottom: 5px;
	&:hover {
		cursor: pointer;
		opacity: 0.8;
	}
	.btn {
		position: absolute;
		top: 37%;
		right: 4%;
		width: 18px;
		height: 18px;
		transform-origin: center center;
		transition-duration: 0.2s;

		&:before,
		&:after {
			content: "";
			background-color: #0B73B5;
			border-radius: 10px;
			width: 18px;
			height: 4px;
			position: absolute;
			top: 7px;
			left: 0;
			transform-origin: center center;
		}
		&:before {
			width: 4px;
			height: 18px;
			top: 0;
			left: 7px;
		}
	}
	&.is-active {
		.btn {
			-webkit-transform: rotate(-180deg);
			transform: rotate(-180deg);
			&:before {
				content: none;
			}
		}
	}
}

.details-summary::-webkit-details-marker {
	display: none;
}

.details-content {
	padding: 20px;
	background-color:#DFEEFF;
	p {
		margin: 0 0 20px;
		color: #000;
		font-size: 24px;
		text-align: left;
		&:last-of-type {
			margin: 0 0 0;
		}
	}
}
@media screen and (max-width: 640px) {
	.details-summary {
		font-size: 16px;
	}
	.details-content p {
		font-size: 16px;
	}
}
/* ----------------------------------------------------
フッター
---------------------------------------------------- */
footer {
	text-align: center;
	background-color: #333;
}
.footer {
	max-width: 640px;
	padding: 2% 0 170px;
	margin: 0 auto;
}
.footer-link {
	display: flex;
	justify-content: center;
}
.footer-link a {
	font-size: 16px;
	color: #fff;
}
.small {
	font-size: 14px;
	color: #fff;
}

@media screen and (max-width: 640px) {
	.footer {
		width: 100%;
		padding: 2% 0 115px;
		margin: 0 auto;
	}
	.footer-link a {
		font-size: 12px;
	}
	.small {
		font-size: 12px;
	}
}
/* ----------------------------------------------------
下部固定ボタン
---------------------------------------------------- */
.bottom-btn {
	max-width: 640px;
	margin: 0 auto;
}
#floating {
	position: fixed;
	bottom: 8px;
	z-index: 100;
	width: 640px;
	max-width: 100%;
	padding: 0 3%;
	visibility: hidden;
	transition: .5s;
	opacity: 0;
	box-sizing: border-box;
}
#floating.on {
	visibility: inherit;
	opacity: 1;
}


.a-button {
	position: relative;
	overflow:hidden;
	border-radius: 60px;
}
.a-button::before {
	position: absolute;
	content: '';
	display: inline-block;
	top: -180px;
	left: 0;
	width: 30px;
	height: 100%;
	background-color: #b5e7ff;
	transition: 300ms;
	animation: shinyshiny 2.5s ease-in-out infinite;
}
@keyframes shinyshiny {
	0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
	80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
	100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}


@media screen and (max-width: 640px) {
	.bottom-btn {
		width: 100%;
	}
	#floating {
		position: fixed;
		bottom: 8px;
		z-index: 100;
		width: 100%;
	}
}