@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800);

/*--------------------
1. General
--------------------*/

body#gyokeien-body {margin: 0; padding: 0; font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif; line-height: 1.6; letter-spacing: 0.05em; font-weight: 500; font-size: 16px;}

#gyokeien-body h1, #gyokeien-body h2, #gyokeien-body #gyokeien-body h3, #gyokeien-body h4, #gyokeien-body h5, #gyokeien-body h6 {font-weight: 500; letter-spacing: 0.05em; font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;}

p {font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif; font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: 0.05em; color: #000;}

#gyokeien-body .container {padding: 0 15px; max-width: 1060px; margin: 0 auto;}

a:hover, a:focus, a:active, a.active {color: #c6a204; transition : 0.4s;}
a, a:hover, a:focus, a:active, a.active {outline: 0;}

section {}
img {display: block;}

ib {display: inline-block;}
.tcenter {text-align: center;}
.tleft {text-align: left;}
.tright {text-align: right;}

hr {margin: 0.5em auto;}

.desktop {display: block;}
.smartphone {display: none;}


@media screen and (max-width: 768px){
	.desktop {display: none;}
	.smartphone {display: block;}
}

/*--------------------
2. Navigation
--------------------*/
nav {}
.nav-pc {display: block; background-color: #305933; padding: 1em 0; position: relative;}
.nav-pc-inner {max-width: 1060px; margin: 0 auto;}
.nav-pc-inner ul {display: flex; flex-wrap: wrap; justify-content: center; list-style-type: none; margin: 0; padding: 0;}
.nav-pc-inner ul li {}
.nav-pc-inner ul li a {display: block; color: #fff; text-decoration: none; padding: 5px 15px;}
.nav-pc-inner ul li a:hover {color: #c6a204;}

.nav-sp {display: none;}


@media screen and (max-width: 768px){
	.nav-pc {display: none;}
	.nav-sp {display: block;}
	.nav-sp-inner.panelactive {position:fixed; z-index: 996; top: 0; width:100%; height: 100vh;}
	.circle-bg {
		position: fixed;
		z-index: 993;
		/*丸の形*/
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background: #999;
  		/*丸のスタート位置と形状*/
		transform: scale(0);/*scaleをはじめは0に*/
		right:-50px;
		top:-50px;
		transition: all .6s;/*0.6秒かけてアニメーション*/
	}
	.circle-bg.circleactive {transform: scale(50);}
	.nav-sp-inner {display: none; position: fixed; z-index: 999; width: 100%; height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch;}
	.nav-sp-inner.panelactive {display: block;}
	.nav-sp-inner ul {opacity: 0; position: absolute; z-index: 999; top:200px; left:50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}
	.nav-sp-inner.panelactive ul {opacity: 1; list-style-type: none; padding: 0; margin: 0;}
	.nav-sp-inner.panelactive ul li {
		animation-name: navscreen;
		animation-duration:1s;
		animation-delay:.2s;/*0.2 秒遅らせて出現*/
		animation-fill-mode:forwards;
		opacity:0;
		margin: 0 0 1em;
	}
	.nav-sp-inner.panelactive ul li a {text-decoration: none; font-size: 1.1em; color: #fff;}
}

@keyframes navscreen {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/* ハンバーガーボタン
---------------------------------- */
.openbtn{
  position: fixed;/*ボタン内側の基点となるためrelativeを指定*/
	top: 20px;
	right: 20px;
  background:#422246;
  cursor: pointer;
    width: 50px;
    height:50px;
  border-radius: 50%;
	border: solid 1px #fff;
	display: none;
	z-index: 999;
}

/*ボタン内側*/
.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 2px;
    border-radius: 2px;
  background: #fff;
  }


.openbtn span:nth-of-type(1) {
  top:15px; 
    width: 45%;
}

.openbtn span:nth-of-type(2) {
  top:23px;
    width: 35%;
}

.openbtn span:nth-of-type(3) {
  top:31px;
    width: 20%;
}

/*activeクラスが付与されると線が回転して×になる*/

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-135deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(135deg);
    width: 30%;
}

@media screen and (max-width: 768px){
	.openbtn {display: block;}
}


/*--------------------
3. Header
--------------------*/

header {position: relative; text-align: center;}
.main-image {background:url('../images/topimage.webp') no-repeat center; background-size: cover; height: 600px;}
.main-title {
	position: absolute;
	top: 50%; right: 10%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	padding: 3em;
	background-color: #f3fae0cc;
	border-radius: 24px;
}
.main-title h2 {font-size: 2.4em; margin: 0; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; float: right; color: #000;}
.main-title h3 {font-size: 1.6em; margin: 0; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; float: right; color: #000;}


@media screen and (max-width: 768px){
	.main-image {height: 400px;}
	.main-title {padding: 2em;}
	.main-title h2 {font-size: 1.6em;}
	.main-title h3 {font-size: 1.2em;}
}


/*--------------------
4. Sections
--------------------*/
/* ご挨拶
---------------------------------- */
#greeteing {
	overflow: hidden;
	margin: 0 auto;
	padding: 5em 0 7em;
	background: url('../images/greeting-bg.webp') no-repeat center;
    background-size: cover;
    position: relative;
    z-index: -2;
}
.gree-wrap {padding: 0 2em 3em; position: relative; display: flex; margin: 0 auto;}
.gree-image {width: 50%; padding: 0; border-radius: 24px;}
.gree-image img {object-fit: cover; width: 100%; height: 100%; border-radius: 24px;}
.gree-text {width: 50%; padding: 0.5em 0 0 2em;}
.gree-text h2 {font-size: 3.6em; line-height: 1em; color: #422246; font-weight: 600; margin: 0.83em 0;}
.gree-text h3 {font-size: 2.4em; line-height: 1.2; margin: 0.5em 0; font-weight: 500;}
.gree-text p {font-size: 16px; margin: 0 0 0.5em;}
.gree-text::after {
	position: absolute;
	content: '';
	background: #e9f3e6;
	display: block;
	top: 5em;
	right: 0;
	z-index: -1;
	width: 100%;
	height: 90%; border-radius: 24px;
}


@media screen and (max-width: 768px){
	.gree-text h2 {font-size: 36px; margin: 0 0 0.5em;}
	.gree-text h3 {font-size: 24px;}
	.gree-wrap {display: block;}
	#greeteing {padding: 3em 0;}
	.gree-wrap {padding: 0;}
	.gree-text {width: 96%; padding: 15px;}
	.gree-text::after {top: 0; width: 100%; height: 100%; right: initial; left: 0;}
}

@media screen and (max-width: 480px){
	.gree-text p {font-size: 13px;}
	.gree-text h2 {font-size: 24px;}
	.gree-text h3 {font-size: 18px;}
}


/* 行慶苑のご案内
---------------------------------- */
#profile {}
.profile-title {background-color: #efe9f3; padding: 3em 1em 2em;}
.profile-title h2 {font-size: 3.6em; line-height: 1em; color: #422246; text-align: center; font-weight: 600; margin: 0 0 0.5em;}
.profile-title h3 {font-size: 1.8em; margin: 0; line-height: 1em; text-align: center;}
.profile-wrap {position: relative; display: flex; flex-wrap: wrap; justify-content: center; margin: 60px auto; max-width: 800px;}
.profile-img {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 10px;}
.profile-img img {width: 100%; height: auto; max-width: 660px; margin: 0 auto;}
.fade-img {-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;}
.fade-img img {width: 100%; height: auto;}
.proimg-inner {padding: 0 5px;}


@media screen and (max-width: 768px){
	.profile-title {padding: 40px 15px 30px;}
	.profile-title h2 {font-size: 36px;}
	.profile-title h3 {font-size: 24px; line-height: 1.2;}
	.profile-wrap {margin: 30px auto;}
	.profile-img {margin-bottom: 5px;}
	.fade-img {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
	.proimg-inner {padding: 5px;}
}

@media screen and (max-width: 480px){
	.profile-title h2 {font-size: 24px;}
	.profile-title h3 {font-size: 18px;}
}

/* こんな方におすすめ
---------------------------------- */
#osusume {position: relative; margin: 0 auto; background-color: #fff1e6;}
.osusume-wrap {position: relative; padding: 5em 3em 2em;}
.osusume-wrap h2 {font-size: 3.6em; line-height: 1em; color: #422246; text-align: center; font-weight: 600; margin: 0 0 0.5em;}
.osusume-inner {padding: 1.5em 0;}
.osusume-image {max-width: 128px; float: left; margin-right: 30px;}
.osusume-image img {width: 100%; height: auto;}
.osusume-inner h3 {font-size: 2.4em; margin: 0;}
.osusume-inner p {font-size: 16px; margin: 0 0 0.5em;}


@media screen and (max-width: 768px){
	.osusume-wrap h2 {font-size: 36px;}
	.osusume-inner h3 {font-size: 20px; line-height: 1.2; margin: 10px 0; border-left: solid 10px #422246; padding-left: 10px;}
	.osusume-wrap {padding: 3em 0 1em;}
	.osusume-image {max-width: 128px; float: none; margin-right: 0; margin: 0 auto;}
	.osusume-inner {padding: 30px 0;}
	.osusume-inner p {font-size: 14px;}
}

@media screen and (max-width: 480px){
	.osusume-inner p {font-size: 13px; margin: 0;}
	.osusume-wrap h2 {font-size: 24px;}
	.osusume-inner h3 {font-size: 18px;}
}


/* 6つの特長
---------------------------------- */
#tokutyou {
	padding: 5em 0;
	background: url('../images/tokutyou-bg.webp') no-repeat center;
    background-size: cover;
}
#tokutyou h2 {font-size: 3.6em; line-height: 1em; color: #fff; text-align: center; font-weight: 600; margin: 0.83em 0;}
.toku-card {margin: 8px; background-color: #e9f3e6; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; border-radius: 12px;}
.toku-image {}
.toku-image img {width: 100%; height: auto; display: block; border-radius: 12px 12px 0 0;}
.toku-card-inner {padding: 1em; height: 180px; box-sizing: initial;}
.toku-card-inner h4 {font-size: 1.4em; margin: 0 0 0.5em; line-height: 1.2; color: #fff; background-color: #422246; padding: 5px 10px;}
.toku-card-inner p {font-size: 16px; margin: 0; line-height: 1.2; padding: 0 10px;}
.toku-card-inner p span {font-size: 14px;}


@media screen and (max-width: 768px){
	#tokutyou {padding: 3em 0;}
	#tokutyou h2 {font-size: 36px; margin: 0 0 1em;}
	#tokutyou .row-ar .col-4 {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
	.toku-card-inner h4 {font-size: 1.2em;}
	.toku-card-inner p {line-height: 1.4;}
}

@media screen and (max-width: 580px){
	#tokutyou .row-ar .col-4 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
	.toku-card-inner {height: auto;}
}

@media screen and (max-width: 480px){
	#tokutyou h2 {font-size: 24px;}
	.toku-card-inner p {font-size: 13px;}
	.toku-card-inner h4 {font-size: 16px;}
}

/* ギャラリー
---------------------------------- */
#gallery {padding: 5em 0 3em; background-color: #f5f5ee;}
.gallery-wrap {}
.gallery-wrap h2 {font-size: 3.6em; line-height: 1em; color: #422246; text-align: center; font-weight: 600; margin: 0 0 1em;}
.gallery-wrap a {}
.gallery-wrap a:hover .gal-exp img {transform: scale(1.15, 1.15);}
.gal-exp {overflow: hidden;}
.gal-exp img {width: 100%; height: auto; transition: transform 0.75s ease; backface-visibility: hidden;}


@media screen and (max-width: 768px){
	#gallery {padding: 3em 0;}
	.gallery-wrap h2 {font-size: 1.8em;}
	.gallery-wrap .row-ar .col-3 {-ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%;}
}

@media screen and (max-width: 580px){
	.gallery-wrap .row-ar .col-3 {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
}


/* 料金
---------------------------------- */
#price {padding: 5em 0 3em; background-color: #fff;}
.price-wrap {}
.price-wrap h2 {font-size: 3.6em; line-height: 1em; color: #422246; text-align: center; font-weight: 600; margin: 0 0 0.5em;}
.price-wrap h4 {font-size: 2em; margin: 0 0 1em; line-height: 1em; text-align: center;}
.price-image {padding: 10px;}
.price-image img {width: 100%; height: auto;}
.price-list {padding: 10px; border-bottom: solid 1px #aaa;}
.price-list:last-child {border: none;}
.col-4-price {-ms-flex: 0 0 35%; flex: 0 0 40%; max-width: 40%;}
.col-8-price {-ms-flex: 0 0 65%; flex: 0 0 60%; max-width: 60%;}
.col-4-price h3 {margin: 10px 0; width: 160px; background-color: #f8ff37; color: #422246; text-align: center; border: solid 1px #06461b; font-weight: 600;}
.price-kakaku {position: relative; font-size: 2em; line-height: 0.8; font-weight: 600;}
.price-kakaku span {font-size: 3em; font-weight: 500;}
.price-sec {position: absolute; top: 10px; left: 100px; font-size: 14px; font-weight: 600; background-color: #305933; color: #fff; line-height: 1.6; padding: 2px 8px;}
.col-8-price p {font-size: 16px; margin: 0.5em 0;}
.price-hosoku {font-size: 15px; margin: 0;}


@media screen and (max-width: 768px){
	#price {padding: 3em 0;}
	.price-wrap h2 {font-size: 36px; margin: 0 0 1em;}
	.price-wrap h4 {font-size: 20px; line-height: 1.4;}
	.price-image {max-width: 520px; margin: 0 auto; padding: 0;}
	.price-sec {left: 110px;}
	.col-8-price p {margin: 0 0 10px;}
	.price-hosoku {font-size: 14px;}
}

@media screen and (max-width: 580px){
	.col-4-price, .col-8-price {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 20px;}
}

@media screen and (max-width: 480px){
	.price-wrap h2 {font-size: 24px; margin: 0 0 1em;}
	.price-wrap h4 {font-size: 16px;}
	.col-8-price p {font-size: 13px; line-height: 1.4;}
	.price-hosoku {font-size: 12px;}
}


/* 納骨までの流れ
---------------------------------- */
#flow {
	padding: 5em 0 3em;
	background: url('../images/flow-bg.webp') no-repeat center;
    background-size: cover;
}
.flow-wrap {}
.flow-wrap h2 {font-size: 3.6em; line-height: 1em; color: #422246; text-align: center; font-weight: 600; margin: 0 0 1em;}
.flow-inner {}
.col-3-flow {-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;}
.flow-list {position: relative; margin: 1em; padding: 1em; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; background: linear-gradient(0deg, rgba(48, 89, 51, 1) 0%, rgba(255, 255, 255, 0.7) 10%); height: 300px; border-radius: 12px; box-sizing: initial;}
.flow-list h4 {position: relative; font-size: 24px; margin: 30px 0 10px; line-height: 1; z-index: 2;}
.flow-list h4 span {font-size: 72px; margin-right: 20px; color: #06461b;}
.flow-image {position: absolute; top: -20px; left: 10px;}
.flow-image img {width: 100%; height: auto; max-width: 200px;}
.flow-list p {font-size: 16px; margin: 1em 0 0;}


@media screen and (max-width: 991px){
	.flow-list {height: 240px;}
	.col-3-flow {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
}

@media screen and (max-width: 768px){
	#flow {padding: 3em 0;}
	.flow-wrap h2 {font-size: 36px; margin: 0 0 1em;}
	.col-3-flow {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
	.flow-list {margin: 1em 0; height: auto;}
	.flow-list h4 {margin: 20px 0 0; font-size: 20px; padding-bottom: 5px; border-bottom: solid 2px #422246;}
	.flow-list h4 span {font-size: 48px; margin-right: 10px;}
	.flow-image {top: -10px;}
	.flow-image img {max-width: 150px;}
	.flow-list p {margin: 0.5em 0 0;}
}

@media screen and (max-width: 480px){
	.flow-list h4 {font-size: 16px;}
	.flow-wrap h2 {font-size: 24px;}
	.flow-list p {font-size: 13px;}
}


/* アクセス
---------------------------------- */
#access {padding: 5em 0 3em;}
.access-wrap {}
.access-wrap h2 {font-size: 3.6em; line-height: 1em; color: #422246; text-align: center; font-weight: 600; margin: 0 0 1em;}
.access-route {margin: 1em;}
.access-route h4 {margin: 0; font-size: 1.6em; padding: 1rem 1.5rem; border-bottom: 3px dotted #000; background: #e9f3e6; line-height: 1.2;}
.access-drive {padding: 0 1em;}
.access-right {border-right: solid 2px #333;}
.access-drive h5 {font-size: 1.2em; margin: 0; border-bottom: solid 1px #ccc;}
.access-drive ul {margin: 0; list-style-type: none; padding: 0 0 0 20px;}
.access-drive ul li {font-size: 17px; line-height: 1.2; margin: 1em 0 0;}
.access-drive ul li span {color: #b00000; font-size: 22px; font-weight: 600;}
.access-map {}
.access-map img {width: 100%; height: auto; max-width: 975px; margin: 0 auto;}
.access-map2 img {width: 100%; height: auto; max-width: 460px; margin: 0 auto;}

.access-gmap iframe {width: 100%; height: 400px; display: block;}
.access-gmap2 iframe {width: 100%; height: 400px; display: block;}

@media screen and (max-width: 768px){
	#access {padding: 3em 0;}
	.access-wrap h2 {font-size: 36px;}
	.access-route h4 {font-size: 20px;}
	.access-drive h5 {margin: 1em 0 0;}
	.access-drive ul li {font-size: 16px; line-height: 1.2;}
	.access-drive ul li span {font-size: 20px;}
	.access-route {margin: 1em 0;}
	.access-drive {padding: 0;}
	.access-right {border-right: none;}
	
	.access-gmap2 iframe {height: 360px;}
}

@media screen and (max-width: 480px){
	.access-wrap h2 {font-size: 24px;}
	.access-route h4 {font-size: 16px;}
	.access-drive h5 {font-size: 15px;}
	.access-drive ul li {font-size: 13px;}
	.access-drive ul li span {font-size: 16px;}
}

/* ＱＡ
---------------------------------- */
#qa {padding: 5em 0 3em; position: relative; margin: 0 auto; background-color: #f5f5ee;}
.qa-wrap {}
.qa-wrap h2 {font-size: 3.6em; line-height: 1em; color: #422246; text-align: center; font-weight: 600; margin: 0 0 1em;}
.qa-list {position: relative;}
.qa-image {float: left; margin-right: 20px;}
.qa-image img {width: 100%; height: auto; max-width: 110px;}
.qa-text {margin: 0 0 4em;}
.qa-text h5 {margin: 0; font-size: 1.6em;}
.qa-text h5 span {border-bottom: 4px solid #ffe713;}
.qa-text p {font-size: 16px;}


@media screen and (max-width: 768px){
	#qa {padding: 3em 0;}
	.qa-wrap h2 {font-size: 36px;}
	.qa-image {margin-right: 10px;}
	.qa-image img {max-width: 55px;}
	.qa-text {margin: 0 0 2em;}
	.qa-text h5 {font-size: 20px;}
	.qa-text p {padding-left: 40px; font-size: 16px;}
}

@media screen and (max-width: 480px){
	.qa-wrap h2 {font-size: 24px;}
	.qa-text h5 {font-size: 16px;}
	.qa-text p {font-size: 13px;}
}

/* お問い合わせフォーム
---------------------------------- */
.contact-form form#mailformpro .mfp_buttons button {color: #000; font-weight: 600; font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;}

#contactform {
	padding: 5em 0 3em;
	background: url('../images/contactform-bg.webp') no-repeat center;
    background-size: cover;
	background-attachment: fixed;
}
.contact-wrap {}
.contact-wrap h2 {font-size: 3.6em; line-height: 1em; color: #fff; text-align: center; font-weight: 600; margin: 0 0 1em; text-shadow: 3px 4px 3px rgb(61 70 70);}
.contact-form {}
.contact-form .wpcf7-form {width: 90%; margin: 0 auto; background-color: #fff; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; padding: 3em 0;}
form.wpcf7-form table {width: 90%; margin: 0 auto; overflow: hidden;}

@media screen and (max-width: 768px) {
	#contactform {padding: 3em 0;}
	.contact-wrap h2 {font-size: 36px;}
	.contact-form .wpcf7-form {width: 96%;}
}
@media screen and (max-width: 480px) {
	.contact-wrap h2 {font-size: 24px;}
}

.contact-subbtn {background: #333333; width: 220px; height: 50px; line-height: 50px; font-size: 14px; color: #ffffff; padding: 0; margin: 0 auto; display: block; transition: 0.4s;}
.contact-subbtn:hover {background: #a0dce2;}

.formTable tr th span {background-color: #06461b; color: #fff; padding: 2px 10px 0px!important;}
.formTable tr td input {cursor: pointer;}
.formTable tr td .inputspan {font-size: 16px; padding-left: 5px!important; transition: 0.4s; cursor: w-resize;}
.formTable tr td .inputspan:hover {border-bottom: solid 3px #06461b;}

.scroll-area {display: block; height: 215px; padding: 30px!important; box-sizing: border-box; overflow-y: auto; border: solid 1px #cccccc;}



span.loading {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border-top: 5px solid rgba( 255, 255, 255, 0.2 );
	border-right: 5px solid rgba( 255, 255, 255, 0.2 );
	border-bottom: 5px solid rgba( 255, 255, 255, 0.2 );
	border-left: 5px solid #ffffff;
	-webkit-transform: translateZ( 0 );
	-ms-transform: translateZ( 0 );
	transform: translateZ( 0 );
	-webkit-animation: load-circle 1.0s linear infinite;
	animation: load-circle 1.0s linear infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -30px;
	margin-left: -30px;
}

@-webkit-keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}

@keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}


form.wpcf7-form * {
	margin: 0;
	padding: 0;
}

form.wpcf7-form {width: 100%; max-width: 960px;	margin: 0 auto;	padding: 30px 0 60px; background: #fff;	border-top: 10px solid #422246;	box-shadow: 0 0 7px rgba( 0, 0, 0, 0.2 ); font-size: 18px; justify-items: center;}
form.wpcf7-form table {width: 90%; margin: 0 auto; overflow: hidden;}
form.wpcf7-form div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {padding: 0 20px;}
form.wpcf7-form div.wpcf7-mail-sent-ok {padding: 0 20px;}

form.wpcf7-form table tr {
	clear: both;
	padding: 15px 0;
	text-align: left;
	overflow: hidden;
}

form.wpcf7-form tr th {padding: 10px 0 10px 20px; font-weight: 600; font-size: 18px; color: #000; background-color: #fff; border: none;}
form.wpcf7-form tr td {padding: 15px; font-size: 16px; background-color: #fff; border: none;}

.choice-radio {}
.choice-radio span {margin-right: 10px;}
.required {color: red;}



@media screen and (max-width: 768px) {
	form.wpcf7-form {font-size: 16px; padding: 20px 0 30px;}
	form.wpcf7-form table {width: 96%;}
	form.wpcf7-form tr th {width: auto;	display: block;	text-align: left; padding: 5px 10px 0; font-size: 16px;}
	form.wpcf7-form tr td {width: auto;	display: block; padding: 0 15px 15px; font-size: 14px;}
	form.wpcf7-form div.wpcf7-validation-errors, div.wpcf7-acceptance-missing, form.wpcf7-form div.wpcf7-mail-sent-ok {margin: 0 15px; padding: 5px 15px; font-size: 14px;}
}

@media screen and (max-width: 480px) {
	.wpcf7 form.wpcf7-form .form-button {margin: 15px 0;}
	form.wpcf7-form tr td {font-size: 13px;}
	p.pr-policy {font-size: 13px;}
}


form.wpcf7-form dl dt:first-child,
form.wpcf7-form dl dt:first-child + dd {
	border: none;
}

form.wpcf7-form dl dt span {
	display: block;
	font-size: 85%;
	color: #3377ff;
}

.contact-subbtn {background: #06461b; width: 220px; height: 50px; line-height: 50px; font-size: 14px; color: #ffffff; padding: 0; margin: 0 auto; display: block; transition: 0.4s;}
.contact-subbtn:hover {background: #c6a204;}

.formTable tr th span {background-color: #06461b; color: #fff; padding: 2px 10px 0!important; font-size: 16px; font-weight: 500; display: inline-block;}
.formTable tr td input {cursor: pointer;}
.formTable tr td .inputspan {font-size: 16px; padding-left: 5px!important; transition: 0.4s; cursor: w-resize;}
.formTable tr td .inputspan:hover {border-bottom: solid 3px #06461b;}

.scroll-area {display: block; height: 215px; padding: 30px!important; box-sizing: border-box; overflow-y: auto; border: solid 1px #cccccc;}

@media screen and (max-width: 768px) {
	.formTable tr th span {padding: 4px 8px!important; font-size: 13px; font-weight: 500;}
	.scroll-area {padding: 5px!important;}
	.scroll-area p {font-size: 13px;}
}


/* -- for JavaScript ここから -------------------------------------------------------------------------------- */

form.wpcf7-form dl dt span.required,
form.wpcf7-form dl dt span.optional {
	display: inline-block;
	float: left;
	color: #ffffff;
	padding: 4px 10px;
	border-radius: 3px;
}

form.wpcf7-form dl dt span.required {
	background: #d9534f;
	border: 1px solid #d43f3a;
}

form.wpcf7-form dl dt span.optional {
	background: #337ab7;
	border: 1px solid #2e6da4;
}

form.wpcf7-form dl dd span.error_blank,
form.wpcf7-form dl dd span.error_format,
form.wpcf7-form dl dd span.error_match {
	display: block;
	color: #ff0000;
	margin-top: 3px;
}


form.wpcf7-form input[type="text"],
form.wpcf7-form input[type="email"],
form.wpcf7-form input[type="tel"] {
	max-width: 90%;
	width: 100%!important;
	padding: 7px 2%;
	border: 1px solid #cccccc!important;
	background: #fafafa;
	-webkit-appearance: none;
	font-size: 100%;
	font-family: inherit;
	margin-top: 7px;
}

form.wpcf7-form input[type="text"]:focus,
form.wpcf7-form input[type="email"]:focus,
form.wpcf7-form input[type="tel"]:focus,
form.wpcf7-form textarea:focus {
	box-shadow: 0px 0px 5px #55ccff;
	border: 1px solid #55ccff;
	background: #ffffff;
}

form.wpcf7-form ul li input[type="radio"],
form.wpcf7-form ul li input[type="checkbox"] {
	margin-right: 10px;
	margin-top: 10px;
}

form.wpcf7-form ul li:first-child input[type="radio"],
form.wpcf7-form ul li:first-child input[type="checkbox"] {
	margin-top: 0px;
}

form.wpcf7-form select {
	font-size: 100%;
	font-family: inherit;
	height: 36px;
}

form.wpcf7-form textarea {
	display: block;
	width: 100%!important;
	max-width: 90%;
	height: 200px!important;
	padding: 7px 2%;
	resize: vertical;
	border: 1px solid #cccccc!important;
	background: #fafafa;
	-webkit-appearance: none;
	font-size: 100%;
	font-family: inherit;
}


form.wpcf7-form ul {
	list-style-type: none;
}

form.wpcf7-form ul li label:hover {
	cursor: pointer;
}


form.wpcf7-form input#company {
	width: 60%;
}

form#mailformpro input#name_1,
form#mailformpro input#name_2,
form#mailformpro input#read_1,
form#mailformpro input#read_2,
form#mailformpro input#postal,
form#mailformpro input#phone,
form#mailformpro input#schedule {
	width: 30%;
}

form.wpcf7-form .form-button {margin: 30px 0; width: 100%;}
form.wpcf7-form input[type="submit"] {width: 80%; display: inline-block; padding: 15px; border: 1px solid #043645; border-radius: 3px; background: #0f637c; font-size: 100%; color: #fff; text-decoration: none; transition: 0.3s;}
form.wpcf7-form input:hover {cursor: pointer; background: #dc8700; border: 1px solid #ae6a00; transition: 0.3s;}

form.wpcf7-form input#address {
	width: 90%;
}


form.wpcf7-form p#form_submit {
	width: 90%;
	margin: 0 auto;
	padding: 15px 0;
	border-top: 1px solid #cccccc;
}

form.wpcf7-form input[type="button"] {
	padding: 20px 20px;
	border: none;
	border-radius: 3px;
/*	background-image: -webkit-linear-gradient( 180deg, rgb(43,167,241) 0%, rgb(116,235,213) 100%);*/
	background: linear-gradient(90deg, rgba(12,125,255,1) 0%, rgba(0,195,255,1) 100%);
	
	font-size: 100%;
	color: #ffffff;
	font-family: inherit;
	-webkit-appearance: none;
	width: 100%;
}

form.wpcf7-form input[type="button"]:hover {
	cursor: pointer;
	background: rgb(43,90,241);
	background: linear-gradient(90deg, rgba(51,3,138,1) 0%, rgba(0,71,255,1) 100%);
/*	background: linear-gradient(90deg, rgba(43,90,241,1) 0%, rgba(116,194,235,1) 100%);*/
}

form.wpcf7-form input#form_submit_button {
	margin-left: 35%;
}

form p #form_submit {font-size: 24px;}






/* -- responsive ----------------------------------------------------------------------------------------------------------------- */

/* 1000pixel start */
@media screen and ( max-width: 1000px ) {

form#mailformpro {
	width: 100%;
	font-size: 100%;
}

form#mailformpro dl {
	overflow: visible;
}

form#mailformpro dl dt {
	width: auto;
	float: none;
	text-align: left;
	padding: 15px 0 5px;
	font-weight: bold;
}

form#mailformpro dl dd {
	width: auto;
	float: none;
	border-top: none;
	padding: 0px 0 20px 0px;
}

form#mailformpro dl dt span {
	font-weight: normal;
}


/* -- for JavaScript ここから -------------------------------------------------------------------------------- */

form#mailformpro dl dt span.required,
form#mailformpro dl dt span.optional {
	margin-right: 1em;
	margin-bottom: 2em;
}


/* -- for JavaScript ここまで -------------------------------------------------------------------------------- */

form#mailformpro input[type="text"],
form#mailformpro input[type="email"],
form#mailformpro input[type="tel"] {
	margin-top: 0px;
}

form#mailformpro input#postal + a {
	padding: 6px 15px 5px;
}

form#mailformpro input#form_submit_button {
	margin-left: 0;
}

form#mailformpro select {
	font-size: 16px;
	margin-top: 0;
}

form#mailformpro input#phone,
form#mailformpro input#schedule {
	width: 50%;
}

}




/*--------------------
5. footer
--------------------*/
footer {padding: 3em 0 0; background-color: #724078;}
.footer-wrap {}
.footer-com {padding: 0 2em 0 0;}
.footer-com h3 {margin: 0 0 0.5em; color: #fff; font-size: 1.4em;}
.footer-com p {font-size: 16px; color: #fff; margin: 0; font-weight: 400;}
.footer-com p.footer-add {}
.footer-com p.footer-tel {display: flex; flex-wrap: wrap;}
.footer-com p.footer-tel img {width: 22px; height: 22px;}
.footer-com ul {list-style-type: none; padding: 0; margin: 1em auto;}
.footer-com ul li a {color: #fff; font-size: 15px; font-weight: 400;}
.footer-com ul li a:hover {color: #C6A204;}
.col-6-footer {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
.footer-contents {}
.footer-gmap {}
.footer-gmap iframe {width: 100%; height: 330px; display: block;}

.copyr {background-color: #62126c; margin-top: 2em; padding: 1.5em 20px; font-size: 14px;}
.fooler-logo {text-align: center; color: #e9f3e6; font-weight: 400;}
.fooler-logo span {margin-right: 20px;}
.copyr .copyright {text-align: center; color: #e9f3e6; font-weight: 400; margin: 0;}

@media screen and (max-width: 768px) {
	footer {padding: 1.5em 0 0; margin-bottom: 57px;}
	.footer-com {padding: 0;}
	.footer-com h3 {font-size: 20px;}
	.footer-com p {font-size: 14px;}
	.footer-com p.footer-tel img {width: 20px; height: 20px;}
	.footer-com ul li a {font-size: 14px;}
	.footer-gmap {display: none;}
}

@media screen and (max-width: 480px) {
	.footer-com h3 {font-size: 18px;}
	.footer-com p.footer-add {font-size: 13px;}
	.footer-com ul {margin: 10px 0;}
	.footer-com ul li {line-height: 1.2;}
	.footer-com ul li a {font-size: 13px;}
	.fooler-logo, .copyright {font-size: 12px;}
}

/*--------------------
6. Components
--------------------*/

.btn-xl:hover, .btn-xl:focus, .btn-xl:active, .btn-xl.active, .open .dropdown-toggle.btn-xl {color: #fff; background-color: #fec503; border-color: #f6bf01; transition : 0.4s;}

.btn:hover, .btn:focus, .btn:active, .btn.active, .open .dropdown-toggle.btn {color: #fff; background-color: #fec503; border-color: #f6bf01; transition : 0.4s;}

.btn {
	display: inline-block;
	padding: 8px 20px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	background-color: #0071c5;
	color: #fff;
}

.btn-xl {
color: #fff;
    background-color: #0071c5;
    /* border-color: #726FB9; */
    font-family: "Open Sans",sans-serif;
    text-transform: uppercase;
    font-weight: 800;
    border-radius: 0;
    letter-spacing: 2px;
    font-size: 16px;
    padding: 17px 45px;
}

/* Back to top button
---------------------------------- */
#back-top {position: fixed;	z-index: 970; bottom: 0; right: 0;}
#back-top a {
	width: 60px;
	height: 60px;
	display: block;
	text-align: center;
	font-size: 20px;
	font-weight: 500;
	line-height: 86px;
	text-transform: uppercase;
	text-decoration: none;
	color: #422246;
	background: #efd694;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	border-radius: 100% 6px 0 6px;
}
#back-top a:hover {
	color: #fff;
	background: #c6a204;
}


@media screen and (max-width : 768px) {
	#back-top {bottom: 58px;}
}


/* to Form
---------------------------------- */
.toform {position: fixed; top: 120px; right: 0; z-index: 980;}
.toform a {display: block; background-color: #422246; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-decoration: none; color: #fff; padding: 0.8em 0.4em; font-size: 20px; border-radius: 12px 0 0 12px;}

@media screen and (max-width: 768px){
	.toform {top: initial; right: initial; bottom: 0; left: 0; width: 100%; height: auto;}
	.toform a {-ms-writing-mode: initial; writing-mode: initial; text-align: center; padding: 0.8em; font-size: 18px; border-radius: initial;}
}


/* fadeUp
---------------------------------- */
.fadeUp {opacity: 0; transform: translateY(30px); transform: scale(0.90,0.90); transition: 0.3s ease-in-out;}
.fadeUp.on {transform: translateY(0); transform: scale(1,1); opacity: 1.0;}

/*--------------------
7. bootstrap
--------------------*/
.row-ar {display: flex; flex-wrap: wrap; justify-content: center;}

.col-12 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
.col-10 {-ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%;}
.col-9 {-ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%;}
.col-8 {-ms-flex: 0 0 66.666666%; flex: 0 0 66.666666%; max-width: 66.666666%;}
.col-7 {-ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%;}
.col-6 {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
.col-5 {-ms-flex: 0 0 41.666666%; flex: 0 0 41.666666%; max-width: 41.666666%;}
.col-4 {-ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%;}
.col-3 {-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;}
.col-2 {-ms-flex: 0 0 16.666666%; flex: 0 0 16.666666%; max-width: 16.666666%;}

@media screen and (max-width: 768px){
	.col-8 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
	.col-7 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
	.col-6 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
	.col-5 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
	.col-4 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
	.col-3 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
}


/*--------------------
8. サンクスページ
--------------------*/
#thanks {}
#thanks header {position: relative; text-align: center;}
#thanks .main-image {background:url('https://anryuin.com/magnolia/images/topimage3.webp') no-repeat center; background-size: cover; height: 600px;}

#thanks-page {padding: 5em 0;}
.thanks_waku {}
.thanks_waku p {font-size: 1.1em; margin: 0;}
.thanks_waku p.thanks-midashi {font-size: 2em; margin: 0 0 1em;}

.modoru {margin: 3em 0 0; text-align: center;}
.modoru a {display: inline-block; font-size: 1.2em; text-decoration: none; background-color: #c6a204; color: #fff; transition: 0.4s; padding: 0.5em 2.5em;}
.modoru a:hover {background-color: #e9f3e6; color: #333;}

@media screen and (max-width: 768px){
	#thanks .main-image {height: 400px;}
	#thanks-page {padding: 3em 0;}
	.thanks_waku p {font-size: 16px;}
	.thanks_waku p.thanks-midashi {font-size: 1.4em; margin: 0 0 1em; line-height: 1.2;}
}