@charset "utf-8";
/* CSS Document */

/* ===========================================================
 header
=========================================================== */

header nav {
 padding: 5vw 4vw;
 display: flex;
 align-items: center;
 justify-content: space-between;
 background: #fff;
 box-shadow: 0 0 1vw 0.2vw #e9e9e9;
}

header nav figure {
 width: 35vw;
}

header nav .wrapper {
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 48vw;
}

header nav .wrapper .link {
 font-size: 3vw;
 font-weight: 700;
 text-decoration: underline;
 text-underline-offset: 1vw;
}

header nav .wrapper .link:hover {
 text-decoration: none;
}


header nav .wrapper span {
	display: block;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 4vw;
	background: #fff;
	box-shadow: 0 0 1vw 0.2vw #e9e9e9;
	z-index: 999;
}

header nav .wrapper .entry {
 background: #bd0a0a;
 color: #fff;
 font-weight: 700;
 font-size: 3.4vw;
 padding: 3vw 0;
 border-radius: 1vw;
	position: relative;
	text-align: center;
}

header nav .wrapper .entry:after {
  content: "";
  width: 3.5vw;
  height: 2.5vw;
  background: url("../img/arr_hoso.svg") no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 5vw;
  transform: translateY(-50%);
}

/* スクロール固定 
------------------------*/
header .fixedMenu.scrolled {
	position: fixed !important;
	top: 0;
	left: 0 !important;
	right: 0 !important;
	z-index: 99999999;
  transition: all .3s ease;
}


/* ===========================================================
 telentry(電話)
=========================================================== */

.telmoContent {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(0,0,0,0.4);
	z-index: 9999999999;
	overflow-x: scroll;
	display: none;
	align-items: center;
	justify-content: center;
}


.telmoContent .telmo_bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
}

.telmoContent.open_wrap {
    display: flex;
}

.telentry {
  padding: 14vw 6vw 4vw;
  background: #fff;
  position: relative;
  margin: 4vw;
}

.telentry h2 {
  margin: 0 0 8vw;
  text-align: center;
  font-size: 6vw;
}


.telentry .entarea {
  background: #f4f4f4;
  margin: 0 auto 6vw;
  border-radius: 2vw;
  box-shadow: none;
  position: relative;
  padding: 8vw 4vw;
  text-align: center;
}


.telentry .entarea .manomaent {
  background: #fff;
  border: solid 1px #e9e9e9;
  padding: 4vw 6vw 3.5vw;
  text-align: center;
  font-size: 4vw;
  font-weight: 700;
  display: inline-block;
  margin: 0 0 5vw;
  border-radius: 3vw;
}

.telmoContent .telentry .entarea .manomatel span {
	font-weight: 700;
	color: red;
}

.telentry .entarea .manomatel a {
  font-size: 8.4vw;
  font-weight: 700;
  font-family: "Arial", sans-serif;
  color: #0c0c0c;
  margin: 0 auto 3vw;
  display: inline-block !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 1vw;
}

.telentry .entarea .manomatel a:before {
 content: "";
 background:url("../img/freedial.svg") no-repeat;
 background-size: contain;
 width: 12vw;
 height: 8vw;
 display: inline-block;
 margin: 0 1vw 0 0;
vertical-align: middle;
}

.telentry .entarea .manomatel p {
  font-size: 3.6vw;
  font-weight: 700;
  line-height: 6vw;
  margin: 0 0 3vw;
  position: relative;
  letter-spacing: 0;
}

.telentry .entarea .manomatel p:before {
  content: "※";
}

.telentry .entarea .manomatel ul li {
  font-size: 3.4vw;
  letter-spacing: 0px;
  color: #585858;
  margin: 0 0 2vw;
  line-height: 5vw;
}

.telentry .contact a {
  background: #79a4c5;
  color: #fff;
  width: 80vw;
  margin: 6vw auto 8vw;
  text-align: center;
  font-size: 4.3vw;
  font-weight: 700;
  letter-spacing: 0.3vw;
  padding: 3.8vw 0 4.2vw;
  border-radius: 1.5vw;
  position: relative;
}

.telentry .contact a:after {
  content: "";
  width: 4.4vw;
  height: 3vw;
  background: url("../img/arr_hoso.svg") no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 5vw;
  transform: translateY(-50%);
}

.telentry .contact .txt {
  font-size: 3.4vw;
  text-align: center;
  letter-spacing: 0;
  line-height: 5vw;
}


/* -----------------------------
 モーダル
----------------------------- */

body.fixed {
	overflow-y: scroll;
	overflow-x: hidden;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
}

.modal_wrapper {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(0,0,0,0.4);
	z-index: 9999999999999999;
	overflow-x: scroll;
	display: none;
	align-items: baseline;
	justify-content: center;
}

.modal_bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.modal_wrapper_in {
	background: #fff;
	position: relative;
	z-index: 9999;
}

.modal_contents {
	display: none;
}

/* クローズボタン */
.modal_closeBtn {
	position: absolute;
	right: 3vw;
	top: 3vw;
	width: 8vw;
	height: 8vw;
	cursor: pointer;
	transition: all .2s ease;
	z-index: 9999;
}

.modal_closeBtn span {
	width: 100%;
	height: 2px;
	background: #000;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
}

.modal_closeBtn span:nth-of-type(1) {
	transform: translate(-50%, -50%) rotate(45deg);
}

.modal_closeBtn span:nth-of-type(2) {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.modal_closeBtn:hover {
	opacity: 0.6;
	transition: all .2s ease;
}


/* 開閉 */

.modal_wrapper.open_wrap {
display: flex;
}

.modal_contents.open_contents {
display: block;
}



/* ===========================================================
 kv
=========================================================== */

.kv .caution {
 font-size: 3vw;
 margin: 3vw;
 line-height: 4.4vw;
}

/* ===========================================================
 package
=========================================================== */

#package {
 margin: 0 0 12vw;
 padding: 0 6vw;
}

#package h2 {
 font-size: 5.4vw;
 font-weight: 700;
 text-align: center;
 margin: 8vw 0;
} 

#package .wrapper .inner h3 {
 font-size: 4vw;
 text-align: center;
 padding: 3vw;
 border: solid 2px #c0c0c0;
 margin: 0 0 6vw;
 font-weight: 700;
}


#package .wrapper .inner .kiki li {
 display: flex;
 margin: 0 0 6vw;
}

#package .wrapper .inner .kiki li figure {
 margin: 0 4vw 0 0;
}

#package .wrapper .inner .kiki li figure img {
 width: 21vw;
 border-radius: 1vw;
}

#package .wrapper .inner .kiki li .ttl {
 font-size: 4vw;
 font-weight: 700;
 margin: 0 0 4vw;
 white-space: nowrap;
}

#package .wrapper .inner .kiki li .txt {
 font-size: 3.4vw;
 line-height: 5vw;
}

#package .wrapper .inner .sapo {
 margin: 0 0 8vw;
}

#package .wrapper .inner .sapo .ttl {
 font-size: 3.4vw;
 font-weight: 700;
 margin: 6vw 0 2vw;
}

#package .wrapper .inner .sapo .txt {
 font-size: 3.4vw;
 padding: 0 0 0 2vw;
	line-height: 5vw
}

#package .wrapper .inner .price {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
}

#package .wrapper .inner  .price li {
	margin: 0 0 4vw
}

#package .wrapper .inner  .price .ttl {
  font-size: 4vw;
  text-align: center;
  margin: 0 0 1.5vw;
  font-weight: 700;
}

#package .wrapper .inner  .price .txt {
  font-size: 9vw;
  font-family: Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
}

#package .wrapper .inner .price .txt span {
  font-size: 4vw;
  margin: 0 0 0 0.5vw
}

#package .wrapper .inner .keiyaku {
 background: #f0f3f7;
 text-align: center;
 padding: 4vw 0;
 margin: 2vw auto 0;
 border-radius: 1vw;
 font-weight: 700;
 width: 76vw;
 font-size: 4vw;
}


/* ===========================================================
 product
=========================================================== */

#product > .wrapper {
 background: #f4f4f4;
 padding: 0 6vw 2vw;
 margin: 0 auto;
}

#product h2 {
 font-size: 5.4vw;
 font-weight: 700;
 text-align: center;
 padding: 10vw 0;
}

#product ul {
 background: #f4f4f4;
 margin: 0 auto;
}

#product ul li {
 display: flex;
 margin: 0 0 6vw;
}

#product ul li figure {
 margin: 0 4vw 0 0;
}

#product ul li figure img {
 width: 21vw;
 border-radius: 1vw;
}

#product ul li .ttl {
 font-size: 4vw;
 font-weight: 700;
 margin: 0 0 4vw;
}

#product ul li .txt {
 font-size: 3.4vw;
 line-height: 5vw;
}

#product .caution {
 padding: 4vw 6vw 6vw;
 font-size: 3vw;
 line-height: 4.4vw;
 border-bottom: solid 1px #ccc
}

/* ===========================================================
 ctbtn
=========================================================== */

.ctbtn {
 padding: 10vw 0;
 text-align: center;
}

.ctbtn a {
 background: #bd0a0a;
 color: #fff;
 font-weight: 700;
 font-size: 4vw;
 padding: 4vw 17vw;
 border-radius: 1vw;
 display: inline-block;
	position: relative;
}

.ctbtn a:after {
  content: "";
  width: 4.4vw;
  height: 3vw;
  background: url("../img/arr_hoso.svg") no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 5vw;
  transform: translateY(-50%);
}



/* ===========================================================
　movie
=========================================================== */

#movie {
  position: relative;
  margin: 0 0 2vw;
	background: #f4f4f4;
	padding: 0 0 10vw
}

#movie h2 {
 font-size: 5.4vw;
 font-weight: 700;
 text-align: center;
 padding: 10vw 0;
}

#movie .thumbnail {
    position: relative;
    cursor: pointer;
  width: 88vw;
  margin: 0 auto;
}

#movie .thumbnail:after {
    content: "";
    background: url("../img/ico_play.svg") no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15vw;
    height: 15vw;
}

/*　モーダル再生
------------------------*/

#movie .modal {
    display: none;
    animation: fade .3s ease;
}

@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#movie .modal.open {
    transition: all .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999999999999999999;
    animation: fade .3s ease;
}

#movie .wrapper {
    text-align: right;
}

#movie .modal iframe {
    width: 90vw;
    height: 50.4vw;
}


/* 閉じボタン */

#movie .modal .close_btn {
    color: #fff;
    font-size: 18vw;
    display: inline-block;
}


/* ===========================================================
　point
=========================================================== */

#point {
 padding: 0 6vw;
}

#point > h2 {
 font-size: 5.4vw;
 font-weight: 700;
 text-align: center;
 padding: 8vw 0;
}

#point h2 > span {
 font-size: 10vw;
 margin: 0 0 0 0.5vw;
	position: relative;
	top: 0.4vw;
}

#point ul li {
 border-bottom: solid 1px #c0c0c0;
 padding: 6vw 0;
}

#point ul li h3 {
 font-size: 4vw;
 font-weight: 700;
 margin: 0 0 4vw;
}

#point ul li h3 span {
 font-size: 7.5vw;
 margin: 0 1vw 0 0;
}

#point ul li .txt {
 font-size: 3.4vw;
 line-height: 5vw;
	margin: 0 0 4vw
}

#point ul li figure {
 width: 75vw;
	margin: 6vw 0 0 auto
}

#point ul li .tsuika {
 font-size: 3.4vw;
}

/* ===========================================================
 flow
=========================================================== */

#flow {
	padding: 0 6vw
}


#flow h2 {
 font-size: 5.4vw;
 font-weight: 700;
 text-align: center;
 padding: 10vw 0;
}

#flow .caution {
  padding: 2vw;
  font-size: 3vw;
  line-height: 4.4vw;
}

#flow .caution span {
	font-weight: 700;
}


/* ===========================================================
 voice
=========================================================== */

#voice {
	margin: 0 0 10vw;
}

#voice h2 {
 font-size: 5.4vw;
 font-weight: 700;
 text-align: center;
 padding: 10vw 0;
}

#voice .scroll {
	overflow-x: hidden;
	position: relative;
}

#voice ul {
 display: flex;
width: 222vw;
	margin: 0 0 0 15vw;
	transform: translateX(0vw);
	transition: all .2s ease;
}

#voice ul li {
 width: 70vw;
	margin: 0 4vw 0 0;
 border: solid 1px #c0c0c0;
 padding: 4vw;
 border-radius: 1vw;
}

#voice ul li .ttl {
	font-size: 4vw;
	line-height: 5.4vw;
    font-weight: 700;
    margin: 0 0 4vw;
}

#voice ul li .txt {
	font-size: 3.4vw;
    line-height: 5vw;
}

/* -----------------------------
 スライド制御
----------------------------- */

#voice .scbtn span {
	width: 10vw;
	height: 10vw;
	background: #555;
	position: absolute;
	border-radius: 10vw;
	top: 65%;
	transform: translateY(-50%);
	z-index: 999;
}

#voice .scbtn span:after {
	content: "";
	width: 2vw;
	height: 2vw;
	border-top: solid 1vw #fff;
	border-right: solid 1vw #fff;
	position: absolute;
	top: 50%;
	left: 50%;
}

#voice .scbtn .next {
	right: 3vw;
}

#voice .scbtn .next:after {
	transform: translate(-70%, -50%) rotate(45deg);
}

#voice .scbtn .prev {
	left: 3vw;
}

#voice .scbtn .prev:after {
	transform: translate(-30%, -50%) rotate(-135deg);
}


/* ===========================================================
 footer
=========================================================== */

footer {
 padding: 8vw 0 6vw;
 background: #666;
 color: #fff;
	position: relative;
	z-index: 999999999999999999999999999999;
}

footer ul {
 width: 90vw;
 margin: 0 auto 2vw;
}

footer ul li {
 font-size: 3vw;
 margin: 0 0 2vw;
	line-height: 4.4vw
}

footer small {
 font-size: 2.7vw;
 text-align: center;
 display: block;
	margin: 6vw 0 0;
}

