/*全体
--------------------------------------------------------------------------*/
body {
	margin: 0;
	padding: 0;
	COLOR: #351e12;
	FONT-SIZE:20px;
font-family: "Noto Serif JP", serif;
	font-weight: 400;
	LINE-HEIGHT: 150%;
	text-align: center;
	background: #fff;
}

/*paddingとborderをwidthに含める*/
* {	
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

#con{
    width:100%;
max-width: 1920px;
	height:auto;
	margin:0 auto;
	padding:0;
	position:relative;
	text-align: center;
    background: #fff;
}

/*page-top用*/
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	font-size: 0;
	line-height:0;
}

img{
	border:0;
}
@media screen and (max-width:1280px){
img{
max-width: 100%;
height: auto;
width :auto;
}
}

a:link,a:visited{
	outline:0;
	color:#406ec8;
	font-weight: 500;
}

a:hover{
	outline:0;
	color: #ba9434;
}

a:hover img {
opacity: 0.8;
  -ms-filter: "alpha(opacity=80)";
}

br.br1440,br.br1280,br.br1080,br.br835,br.br640,br.br480,br.br414{
display:none;
}
@media only screen and (max-width: 1440px) {
br.br1440{
display:inherit;
}
br.nobr1440{
display:none;
}
}
@media only screen and (max-width: 1280px) {
br.br1280{
display:inherit;
}
br.nobr1280{
display:none;
}
}
@media only screen and (max-width: 1080px) {
br.br1080{
display:inherit;
}
br.nobr1080{
display:none;
}
}
@media only screen and (max-width: 835px) {
br.br835{
display:inherit;
}
br.nobr835{
display:none;
}
}
@media only screen and (max-width: 640px) {
br.br640{
display:inherit;
}
br.nobr640{
display:none;
}
}
@media only screen and (max-width: 480px) {
br.br480{
display:inherit;
}
br.nobr480{
display:none;
}
}
@media only screen and (max-width: 414px) {
br.br414{
display:inherit;
}
br.nobr414{
display:none;
}
}

/*ヘッダ
--------------------------------------------------------------------------*/
header{
width: 100%;
height: auto;
margin: 0;
padding: 0;
background: #fff;
text-align: left;
display: flex;
align-items: center;
position: sticky;
top:0;
left: 0;
z-index: 990;
}
header img{
width: 130px;
padding: 5px 0 15px 15px;
}
header h1{
font-size: 25px;
margin: 0 0 0 15px;
padding: 0;
line-height: 100%;
font-weight: 600;
}
@media only screen and (max-width: 1280px) {
header h1{
font-size: 20px;
}
}
@media only screen and (max-width: 640px) {
header img{
width: 100px;
}
header h1{
font-size: 16px;
}
}

#menu-box{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding: 0;
position: fixed;
top:0;
left:0;
z-index: 9998;
}
menu{
clear: both;
width: 30%;
height: auto;
height: 100vh;
margin: 0 0 0 70%;
padding: 0;
text-align: center;
position: fixed;
top: 0;
background: rgba(233,122,61,1.0);
box-shadow: -5px 0 25px #685856;
}
@media only screen and (max-width: 1080px) {
menu{
width: 40%;
margin: 0 0 0 60%;
z-index: 9998;
}
}
@media only screen and (max-width: 835px) {
menu{
width: 50%;
margin: 0 0 0 50%;
}
}
@media only screen and (max-width: 640px) {
menu{
width: 60%;
margin: 0 0 0 40%;
}
}
@media only screen and (max-width: 480px) {
menu{
width: 70%;
margin: 0 0 0 30%;
}
}
@media only screen and (max-width: 414px) {
menu{
width: 80%;
margin: 0 0 0 20%;
}
}

menu ul{
display:inherit;
clear: both;
float: left;
width: 100%;
height: auto;
margin: -15px 0 0;
padding: 0;
text-align: center;
flex-direction: column;
}
menu li{
display: block;
border-top:1px solid #fff;
padding: 25px 0 10px;
margin: 15px 0 0;
}
menu li a:link,menu li a:visited{
display: block;
text-decoration: none;
color: #fff;
padding:0;
text-align: center;
line-height: 100%;
font-size: 17px;
}
menu li a:hover{
text-decoration: underline;
}

#menu-bu{
display: flex;
width: 100%;
margin:30px 0 0;
padding: 0 15%;
flex-direction: column;
gap: 20px;
}
menu #menu-bu a{
width: 100%;
}
header #menu-bu img{
width: 100%;
max-width: 100%;
padding: 0;
}
@media only screen and (max-width: 640px) {
#menu-bu{
padding: 0 10%;
}
}
@media only screen and (max-width: 480px) {
#menu-bu{
padding: 0 5%;
}
}

/*==================================================
　5-2-4 MENUがCLOSEに
===================================*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn4{
float: right;
  position: fixed;/*ボタン内側の基点となるためrelativeを指定*/
  background:#5b4b49;
  cursor: pointer;
    width: 50px;
    height:50px;
  border-radius: 5px;
  top:10px;
  right:10px;
  z-index: 9999;
  border: 2px solid #fff;
}
/*ボタン内側*/
.openbtn4 span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 13px;
    height: 2px;
    border-radius: 5px;
  background: #fff;
    width: 45%;
  }
.openbtn4 span:nth-of-type(1) {
  top:11px; 
}
.openbtn4 span:nth-of-type(2) {
  top:17px;
}
.openbtn4 span:nth-of-type(3) {
  top:23px;
}
.openbtn4 span:nth-of-type(3)::after {
  content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:0px;
  left:-5px;
  color: #fff;
  font-size: 0.7rem;
  text-transform: uppercase;
  font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
@media only screen and (max-width: 640px) {
.openbtn4 span:nth-of-type(3)::after {
  content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:0px;
  left:-5px;
  color: #fff;
  font-size: 0.7rem;
  text-transform: uppercase;
  font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
}

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/
.openbtn4.active span:nth-of-type(1) {
    top: 12px;
    left: 16px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}
.openbtn4.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn4.active span:nth-of-type(3){
    top: 24px;
    left: 16px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.openbtn4.active span:nth-of-type(3)::after {
  content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
  top:-1px;
  left:-0px;
  font-size: 0.8rem;
  font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
/*.doneクラスがついたヘッダー*/
.dnone {
display: none;
}
/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたら*/
.dnone.panelactive {
display: inherit;
}

/*メイン
--------------------------------------------------------------------------*/
#fv{
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: flex;
overflow-x: hidden;
position: relative;
}

/* 最初の1.2秒間表示されるローディングアイコン */
#fv::after{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
border: 3px solid rgba(255,255,255,0.3);
border-top-color: #e97a3d; /* アイコンの色（必要に応じて変更してください） */
border-radius: 50%;
animation: spinner 0.8s linear infinite, loaderHide 0.1s ease 1.2s forwards;
z-index: 99999;
}
/* 回転アニメーション */
@keyframes spinner{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
/* 1.2秒後にローディングを非表示にするアニメーション */
@keyframes loaderHide{
to{
opacity: 0;
visibility: hidden;
}
}

/* 5つの各カラム共通のアニメーション設定（短縮プロパティを分解） */
#fv > div{
opacity: 0;
transform: translateX(-80px);
animation-name: slideInLeft;
animation-duration: 0.7s;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation-fill-mode: forwards;
}

/* 個別の遅延設定 */
#fv-bi{
animation-delay: 1.2s;
}
#fv-ie{
animation-delay: 1.6s;
}
#fv-home{
animation-delay:2.0s;
}
#fv-haku{
animation-delay: 2.4s;
}
#fv-tan{
animation-delay: 2.8s;
}

/* 左からスライドインする動きのアニメーション定義 */
@keyframes slideInLeft{
0%{
opacity: 0;
transform: translateX(-80px);
}
100%{
opacity: 1;
transform: translateX(0);
}
}

#fv-bi,
#fv-ie,
#fv-haku,
#fv-tan{
width: 20%;
text-align: center;
display: flex;
flex-direction: column;
box-sizing: border-box;
}

#fv a{
display: flex;
flex-direction: column;
height: 100%;
padding: 110px 3% 50px; /* ここにパディングを移動 */
box-sizing: border-box;
text-decoration: none; /* お好みでリンクの下線を消す場合 */
}

#fv-bi{
background: url(image/fv-brown.webp) repeat;
}
#fv-ie{
background: url(image/fv-orange.webp) repeat;
}
#fv-haku{
background: url(image/fv-green.webp) repeat;
}
#fv-tan{
background: url(image/fv-red.webp) repeat;
}
#fv-home{
width: 20%;
background: url(image/fv-home.png) no-repeat center 50%,#fdfaf6;
position: relative;
}
@media only screen and (max-width: 1440px) {
#fv-home{
background: url(image/fv-home.png) no-repeat center 50%/70%,#fdfaf6;
}
}

/* 各カラムの最後にある画像（bu-〇〇.png）を最下部に固定 */
#fv-bi a > img:last-child,
#fv-ie a > img:last-child,
#fv-haku a > img:last-child,
#fv-tan a > img:last-child{
margin-top: auto;
max-width: 40px;
margin-left: auto;
margin-right: auto;
}

#fv-bi:hover,
#fv-ie:hover,
#fv-haku:hover,
#fv-tan:hover{
filter: brightness(1.15); /* 数値を上げると明るくなります（1.1〜1.2程度が自然です） */
}

#fv h2{
width: 100%;
height: auto;
text-align: center;
color: #fff;
font-size: 80px;
font-weight: 600;
line-height: 100%;
margin: 0 0 20px;
padding: 0;
}
@media only screen and (max-width: 1440px) {
#fv h2{
font-size: 70px;
}
}

#fv img{
max-width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
.fv-home-img{
max-width: 25%;
width:25%;
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
pointer-events: none;
}
@media only screen and (max-width: 1440px) {
.fv-home-img{
max-width: 30%;
width:30%;
}
}
@media only screen and (max-width: 1280px) {
.fv-home-img{
top: 50px;
}
}
@media only screen and (max-width: 1080px) {
.fv-home-img{
top: 50px;
max-width: 32%;
width:32%;
z-index: 1;
}
}

.fv-text{
display: flex;
margin: 30px 0 0;
flex-direction: row-reverse;
gap: 15px;
justify-content:center;
}

#fv p{
color: #fff;
line-height: 120%;
margin: 0;
padding: 0;
text-align: left;
font-size: 35px;
writing-mode: vertical-rl;
}
#fv ul{
width: auto;
height: auto;
margin: 0 0 30px;
padding: 50px 0 0;
display: flex;
}
#fv li{
color: #fff;
font-size: 25px;
line-height: 120%;
margin: 0 0 0 15px;
padding: 0;
text-align: left;
writing-mode: vertical-rl;
}
#fv li span {
writing-mode: horizontal-tb;
display: inline-block;
}
@media only screen and (max-width: 1440px) {
#fv p{
font-size: 30px;
}
#fv li{
font-size: 20px;
margin: 0 0 0 10px;
}
}

.fv-home-img{
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 1;
  visibility: visible;
}

/* 100px以上スクロールした時に付与する非表示クラス */
.fv-home-img.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@media only screen and (max-width: 835px) {
/* 全体の並び順を縦方向にする */
#fv{
flex-direction: column;
}
#fv img{
max-width: 20%;
}
/* #fv-home を最上部に移動 */
#fv-home{
width: 100%;
order: -1;
min-height: 120px; /* スマホ時の高さの確保（必要に応じて調整） */
background: url(image/fv-home-tb.png) no-repeat 20px 50%/50%,#fdfaf6;
}
.fv-home-img{
top: 40px;
max-width: 38%;
width:38%;
left: 75%;
transform: translateX(-50%);
}
#fv-bi{
animation-delay: 1.6s;
}
#fv-ie{
animation-delay: 2.0s;
}
#fv-home{
animation-delay:1.2s;
}
/* 各カラムを縦積みに変更 */
#fv-bi,
#fv-ie,
#fv-haku,
#fv-tan{
width: 100%;
}
/* 内部のリンクも縦並びに変更 */
#fv a{
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: 100%;
padding: 20px 3%;
box-sizing: border-box;
}
/* スマホ時：文字の縦書きを解除し、通常の横書き（上から下への積み上げ）にする */
#fv p,
#fv li{
writing-mode: horizontal-tb;
text-align: left;
font-size: 18px; /* スマホで見やすいサイズに調整 */
line-height: 100%;
margin: 0 0 5px 0;
font-weight: 600;
}
#fv p{
font-size: 25px;
}
#fv ul{
writing-mode: horizontal-tb;
flex-direction: column;
padding: 0;
margin: 0;
list-style: disc; /* 必要に応じてリストマークを表示 */
list-style-position: inside;
}
#fv li{
line-height: 100%;
margin: 0 0 5px 0;
}
/* 見出しとテキストのブロック並び順調整 */
.fv-text{
width: 50%;
flex-direction: column;
margin: 0;
gap: 15px;
}
#fv h2{
font-size:60px; /* スマホ時の見出しサイズ */
text-align: left;
width: 60px;
margin: 0;
}
/* 最下部のアイコンを適切な位置に収める */
#fv-bi a > img:last-child,
#fv-ie a > img:last-child,
#fv-haku a > img:last-child,
#fv-tan a > img:last-child{
margin: 25px 0 0 5px; /* 右寄せ、または中央にする場合は auto を活用 */
max-width: 35px;
}
}
@media only screen and (max-width: 640px) {
#fv-bi a > img:last-child,
#fv-ie a > img:last-child,
#fv-haku a > img:last-child,
#fv-tan a > img:last-child{
margin: 0 0 0 5px; /* 右寄せ、または中央にする場合は auto を活用 */
max-width: 25px;
}
.fv-home-img{
top: 50px;
max-width: 44%;
width:44%;
left: 75%;
}
}
@media only screen and (max-width: 480px) {
.fv-home-img{
top: 50px;
max-width: 55%;
width:55%;
left: 70%;
}
#fv h2{
font-size:40px;
width: 40px;
}
.fv-text{
width: 55%;
gap: 10px;
}
#fv li{
font-size: 17px;
}
#fv-home{
background: url(image/fv-home-sp.png) no-repeat 20px 50%/auto 90%,#fdfaf6;
}
}
@media only screen and (max-width: 414px) {
#fv h2{
font-size:35px;
width: 35px;
}
#fv li{
font-size: 16px;
}
#fv-home{
min-height: 100px;
}
}

main{
margin: 0;
padding: 0;
}
main.sub-p{
background: #fdefe4;
padding: 130px 15% 80px;
}
@media only screen and (max-width: 1600px) {
main.sub-p{
padding: 100px 10% 80px;
}
}
@media only screen and (max-width: 1280px) {
main.sub-p{
padding: 100px 5% 60px;
}
}

#info{
width: 100%;
height: auto;
margin: 0;
padding: 50px 10% 80px;
background: url(image/info-back.png) no-repeat left top,url(image/info-back3.png) no-repeat 40% 35%/80px,url(image/info-back2.png) no-repeat left 100px/25%,url(image/info-pict.webp) no-repeat right top/80%,#f7f3ed;
text-align: left;
}
#info img{
max-width: 20%;
}
@media only screen and (max-width: 1280px) {
#info img{
max-width: 25%;
}
}
@media only screen and (max-width: 1080px) {
#info{
padding: 50px 5% 80px;
background: url(image/info-back.png) no-repeat left top,url(image/info-back3.png) no-repeat 40% 35%/80px,url(image/info-back2.png) no-repeat left 100px/25%,url(image/info-pict.webp) no-repeat right top/80%,linear-gradient(90deg,#f5f1eb, #fbe7d5);
}
#info img{
max-width: 30%;
}
}
@media only screen and (max-width: 835px) {
#info{
padding: 50px 5% 80px;
background: url(image/info-back.png) no-repeat left top/20%,url(image/info-back3.png) no-repeat 40% 35%/80px,url(image/info-back2.png) no-repeat left 100px/40%,url(image/info-pict.webp) no-repeat right top/80%,linear-gradient(90deg,#f5f1eb, #fbe7d5);
}
#info img{
max-width: 35%;
}
}
@media only screen and (max-width: 640px) {
#info{
padding: 50px 5% 80px;
background: url(image/info-back.png) no-repeat left top/25%,url(image/info-back3.png) no-repeat 40% 30%/60px,url(image/info-back2.png) no-repeat left 70px/50%,url(image/info-pict.webp) no-repeat right top/80%,linear-gradient(90deg,#f5f1eb, #fbe7d5);
}
#info img{
max-width: 40%;
}
}
@media only screen and (max-width: 480px) {
#info{
padding: 50px 5% 40px;
background: url(image/info-back.png) no-repeat left top/30%,url(image/info-back3.png) no-repeat 40% 30%/60px,url(image/info-back2.png) no-repeat left 70px/60%,url(image/info-pict.webp) no-repeat right top/80%,linear-gradient(90deg,#f5f1eb, #fbe7d5);
}
#info img{
max-width: 50%;
}
}
@media only screen and (max-width: 414px) {
#info img{
max-width: 60%;
}
}

#info h1{
width: 100%;
height: auto;
margin: 50px 0 30px;
padding: 0;
text-align: left;
font-size: 40px;
line-height: 130%;
font-weight: 600;
}
#info h1 strong{
font-weight: 900;
font-size: 60px;
color: #e97a3d;
line-height: 130%;
}
#info p{
text-align: left;
font-size: 25px;
line-height: 180%;
margin: 0 0 30px;
}
@media only screen and (max-width: 1080px) {
#info h1{
font-size: 35px;
}
#info h1 strong{
font-size: 55px;
margin: 0 -15px;
}
#info p{
font-size: 20px;
}
}
@media only screen and (max-width: 835px) {
#info h1 strong{
font-size: 50px;
}
}
@media only screen and (max-width: 480px) {
#info h1{
font-size: 30px;
}
#info h1 strong{
font-size: 40px;
}
#info p{
font-size:18px;
text-align: justify;
}
}
@media only screen and (max-width: 414px) {
#info p{
font-size:17px;
}
}

#info-bu{
display: flex;
width: 50%;
margin: 0 50% 0 0;
padding: 0;
justify-content:space-between;
}
#info-bu a{
width: 45%;
}
#info #info-bu img{
max-width: 100%;
}
@media only screen and (max-width: 1280px) {
#info-bu{
width: 60%;
margin: 0 40% 0 0;
}
#info-bu a{
width: 48%;
}
}
@media only screen and (max-width: 835px) {
#info-bu{
width: 80%;
margin: 0 20% 0 0;
}
}
@media only screen and (max-width: 640px) {
#info-bu{
width: 100%;
margin: 0;
}
}
@media only screen and (max-width: 480px) {
#info-bu{
display: flex;
flex-direction: column;
gap:20px;
align-items: center;
}
#info-bu a{
width: 80%;
}
}
@media only screen and (max-width: 414px) {
#info-bu a{
width: 90%;
}
}

#omoi{
width: 100%;
height: auto;
margin: 0;
padding: 0;
background: #e97a3d;
display: flex;
position: relative;
}
@media only screen and (max-width: 640px) {
#omoi{
flex-direction: column;
}
}

#omoi-title{
width: 20%;
background: url(image/fv-brown.webp) repeat;
padding: 150px 3% 60px;
text-align: center;
align-items: center;
display: flex;
justify-content: center;
box-sizing: border-box;
}
#omoi-text{
width: 80%;
text-align: center;
padding: 150px 3% 60px;
display: flex;
align-items: flex-start;
}
@media only screen and (max-width: 1600px) {
#omoi-title{
padding: 100px 3% 60px;
}
#omoi-text{
padding: 100px 3% 60px;
}
}
@media only screen and (max-width: 1440px) {
#omoi-text{
flex-direction: column;
}
}
@media only screen and (max-width: 1080px) {
#omoi-title{
padding: 80px 3% 60px;
align-items: flex-start;
}
#omoi-text{
padding: 80px 3% 60px;
}
}
@media only screen and (max-width: 640px) {
#omoi-title{
width: 100%;
padding: 40px 3% 40px;
}
#omoi-text{
width: 100%;
padding: 40px 3% 100px;
}
}

#omoi-text img{
max-width: 40%;
}
#omoi-text img.omoi-s{
display: none;
}
#omoi-box{
width: 50%;
}
@media only screen and (max-width: 1600px) {
#omoi-text img{
max-width: 35%;
}
#omoi-box{
width: 60%;
}
}
@media only screen and (max-width: 1440px) {
#omoi-text img.omoi-p{
display: none;
}
#omoi-text img.omoi-s{
display: inherit;
}
#omoi-box{
width: 100%;
}
#omoi-text img{
max-width: 80%;
}
}
@media only screen and (max-width: 640px) {
#omoi-text img{
max-width: 100%;
}
}

#omoi-text h3{
text-align: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
color: #fff;
font-size: 35px;
font-weight: 600;
line-height: 130%;
}
#omoi-text p{
text-align: left;
font-size: 20px;
margin: 0 0 40px;
line-height: 180%;
color: #fff;
}
#omoi-text p strong{
font-size: 25px;
font-weight: 800;
}
@media only screen and (max-width: 835px) {
#omoi-text h3{
font-size: 30px;
}
#omoi-text p{
font-size: 18px;
margin: 0 0 40px;
}
}
@media only screen and (max-width: 640px) {
#omoi-text h3{
font-size: 30px;
text-align: justify;
}
}
@media only screen and (max-width: 480px) {
#omoi-text h3{
font-size: 25px;
}
#omoi-text p{
font-size: 17px;
margin: 0 0 30px;
line-height: 160%;
}
#omoi-text p strong{
font-size: 20px;
font-weight: 800;
}
}

#omoi-title h2{
color: #fff;
font-size: 60px;
font-weight: 500;
line-height: 130%;
margin: 0;
padding: 0 0 50px;
text-align: center;
writing-mode: vertical-rl;
background: url(image/omoi-h2.png) no-repeat center bottom/30px;
letter-spacing: 0.2em;
}
#omoi-title h2 strong{
font-size: 80px;
}
@media only screen and (max-width: 1600px) {
#omoi-title h2{
font-size: 50px;
}
#omoi-title h2 strong{
font-size: 70px;
}
}
@media only screen and (max-width: 1080px) {
#omoi-title h2{
font-size: 40px;
text-align: left;
}
#omoi-title h2 strong{
font-size: 60px;
}
}
@media only screen and (max-width: 640px) {
#omoi-title h2{
width: 100%;
padding: 0 50px 0 0;
writing-mode: horizontal-tb;
text-align: center;
font-size: 35px;
background: url(image/omoi-h2.png) no-repeat 90% center/30px;
}
#omoi-title h2 strong{
font-size: 50px;
}
}
@media only screen and (max-width: 480px) {
#omoi-title h2{
font-size: 30px;
}
#omoi-title h2 strong{
font-size: 45px;
}
}

#faq{
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: flex;
position: relative;
}
@media only screen and (max-width: 640px) {
#faq{
flex-direction: column;
}
}

#faq-title{
width: 20%;
background: url(image/fv-red.webp) repeat;
padding: 150px 3% 160px;
text-align: center;
align-items: center;
display: flex;
justify-content: center;
box-sizing: border-box;
}
#faq-title h2{
color: #fff;
font-size: 60px;
font-weight: 500;
line-height: 130%;
margin: 0;
padding: 0 0 50px;
text-align: center;
writing-mode: vertical-rl;
background: url(image/faq-h2.png) no-repeat center bottom/30px;
}
@media only screen and (max-width: 1080px) {
#faq-title{
padding: 50px 3% 160px;
text-align: left;
align-items: flex-start;
}
#faq-title h2{
font-size: 50px;
}
}
@media only screen and (max-width: 835px) {
#faq-title h2{
font-size: 45px;
}
}
@media only screen and (max-width: 640px) {
#faq-title{
width:100%;
padding: 40px 3% 40px;
}
#faq-title h2{
width: 100%;
writing-mode: horizontal-tb;
font-size: 40px;
line-height: 100%;
padding: 0;
background: url(image/faq-h2.png) no-repeat 90% center/30px;
}
}

#faq-text{
width: 80%;
text-align: center;
padding: 150px 15% 160px;
background: url(image/faq-back.png) no-repeat left 40px/25%,#fbf5ee;
}
@media only screen and (max-width: 1440px) {
#faq-text{
padding: 150px 5% 160px;
}
}
@media only screen and (max-width: 1280px) {
#faq-text{
background: url(image/faq-back.png) no-repeat left 30px/40%,#fbf5ee;
}
}
@media only screen and (max-width: 835px) {
#faq-text{
background: url(image/faq-back.png) no-repeat left 20px/45%,#fbf5ee;
}
}
@media only screen and (max-width: 640px) {
#faq-text{
width: 100%;
}
}
@media only screen and (max-width: 480px) {
#faq-text{
background: url(image/faq-back.png) no-repeat left 20px/55%,#fbf5ee;
}
}

#faq-area{
width: 100%;
height: auto;
margin: 0;
padding: 0 0 20px;
display: flex;
flex-direction: column;
gap: 30px;
}
.faq-box{
width: 100%;
height: auto;
padding: 40px;
border: 5px solid #d94244;
background: #fff;
}
@media only screen and (max-width: 1080px) {
.faq-box{
padding: 30px;
border: 4px solid #d94244;
}
}
@media only screen and (max-width: 640px) {
.faq-box{
padding:25px;
}
}
@media only screen and (max-width: 480px) {
.faq-box{
padding: 20px;
border: 3px solid #d94244;
}
}

.faq-box p{
text-align: left;
font-size: 20px;
line-height: 180%;
margin: 0;
}
.faq-box p img{
margin: 0 10px 0 0;
vertical-align:middle;
}
.faq-box p span{
color: #d94244;
font-size: 30px;
margin: 0 15px 0 -2.5em;
}
.faq-box p:first-of-type{
font-size: 25px;
font-weight: 600;
line-height: 120%;
margin: 0 0 20px;
}
.faq-box p:last-of-type{
margin: 0 0 0 10%;
text-indent: 2em;
}
@media only screen and (max-width: 1080px) {
.faq-box p{
font-size: 18px;
}
.faq-box p img{
width: 35px;
}
.faq-box p span{
font-size: 25px;
margin: 0 15px 0 0em;
}
.faq-box p:first-of-type{
font-size: 22px;
}
.faq-box p:last-of-type{
margin: 0 0 0 0%;
text-indent: 0em;
}
}
@media only screen and (max-width: 640px) {
.faq-box p{
font-size: 17px;
}
}
@media only screen and (max-width: 480px) {
.faq-box p img{
width: 25px;
}
.faq-box p:first-of-type{
font-size: 20px;
}
.faq-box p{
font-size: 16px;
}
}

#faq-text a:link,#faq-text a:visited{
display: block;
width:50%;
margin: 0 auto;
padding: 15px 0;
background: url(image/faq-link.png) no-repeat 95% 50%/10px,#d94244;
color: #fff;
font-size: 25px;
font-weight: 500;
line-height: 100%;
text-align: center;
border-radius: 100px;
text-decoration: none;
}
#faq-text a:hover{
background: url(image/faq-link.png) no-repeat 95% 50%/10px,#ed5a5c;
}
@media only screen and (max-width: 1280px) {
#faq-text a:link,#faq-text a:visited{
width:60%;
}
}
@media only screen and (max-width: 1080px) {
#faq-text a:link,#faq-text a:visited{
width:70%;
font-size: 20px;
}
}
@media only screen and (max-width: 835px) {
#faq-text a:link,#faq-text a:visited{
width:80%;
}
}
@media only screen and (max-width: 480px) {
#faq-text a:link,#faq-text a:visited{
width:100%;
}
}
@media only screen and (max-width: 414px) {
#faq-text a:link,#faq-text a:visited{
font-size: 17px;
}
}

/* PC表示のときだけ逆並び（タイトル左、テキスト右）にする */
@media only screen and (min-width: 641px) {
#faq{
flex-direction: row-reverse;
}
}

#faq .cat-icon{
position: absolute;
top: -130px;
left: 20%;
max-width:280px;
}
@media only screen and (max-width: 1800px) {
#faq .cat-icon{
top: -100px;
left: 20%;
max-width:280px;
}
}
@media only screen and (max-width: 1600px) {
#faq .cat-icon{
top: -70px;
left: 7%;
max-width:250px;
}
}
@media only screen and (max-width: 1080px) {
#faq .cat-icon{
top: -150px;
left: 5%;
max-width:250px;
}
}
@media only screen and (max-width: 835px) {
#faq .cat-icon{
top: -150px;
left: 0%;
max-width:220px;
}
}
@media only screen and (max-width: 480px) {
#faq .cat-icon{
top: -130px;
left: 0%;
max-width:220px;
}
}
#faq .cat-icon2{
position: absolute;
top: -90px;
right: 37%;
max-width:320px;
}
@media only screen and (max-width: 1600px) {
#faq .cat-icon2{
top: -80px;
right: 25%;
}
}
@media only screen and (max-width: 1440px) {
#faq .cat-icon2{
top: -80px;
right: 20%;
max-width:300px;
}
}
@media only screen and (max-width: 1280px) {
#faq .cat-icon2{
top: -50px;
right: 20%;
max-width:280px;
}
}
@media only screen and (max-width: 640px) {
#faq .cat-icon2{
top: 100px;
right: 10%;
max-width:250px;
}
}
@media only screen and (max-width: 480px) {
#faq .cat-icon2{
top: 100px;
right: 0%;
max-width:230px;
}
}

#toi{
width: 100%;
height: auto;
margin: 0;
padding: 150px 0 50px;
background: url(image/toi-cat.png) no-repeat left bottom/15%,url(image/toi-left.png) no-repeat left top/15%,url(image/toi-right.png) no-repeat right top/15%,#f9e8ce;
position: relative;
}
@media only screen and (max-width: 1080px) {
#toi{
background: url(image/toi-cat.png) no-repeat left center/20%,url(image/toi-left.png) no-repeat left top/15%,url(image/toi-right.png) no-repeat right top/15%,#f9e8ce;
position: relative;
}
}
@media only screen and (max-width: 835px) {
#toi{
background: url(image/toi-cat.png) no-repeat left 30%/25%,url(image/toi-left.png) no-repeat left top/15%,url(image/toi-right.png) no-repeat right top/15%,#f9e8ce;
position: relative;
}
}
@media only screen and (max-width: 640px) {
#toi{
background: url(image/toi-cat.png) no-repeat left bottom/38%,url(image/toi-left.png) no-repeat left top/15%,url(image/toi-right.png) no-repeat right top/15%,#f9e8ce;
position: relative;
}
}
@media only screen and (max-width: 480px) {
#toi{
padding: 100px 0 20px;
background: url(image/toi-cat.png) no-repeat left 60%/200px auto,url(image/toi-left.png) no-repeat left top/15%,url(image/toi-right.png) no-repeat right top/15%,#f9e8ce;
position: relative;
}
}

#toi img.toi-logo{
position: absolute;
top: -90px;
max-width:320px;
left: 50%;
transform: translateX(-50%);
}
@media only screen and (max-width: 480px) {
#toi img.toi-logo{
max-width:280px;
}
}

#toi h4{
width: 100%;
margin: 0 0 30px;
padding: 0;
text-align: center;
font-size: 40px;
line-height: 100%;
font-weight: 800;
}
#toi h4 img{
margin: 0 0 0 10px;
vertical-align: middle;
width: 30px;
}
#toi p{
text-align: center;
font-size: 25px;
line-height: 180%;
margin: 0;
}
#toi p strong{
color: #e97a3d;
font-weight: 600;
}
@media only screen and (max-width: 1440px) {
#toi p{
font-size: 20px;
}
}
@media only screen and (max-width: 1080px) {
#toi h4{
font-size: 35px;
}
}
@media only screen and (max-width: 835px) {
#toi h4{
font-size: 30px;
margin: 0 0 20px;
}
#toi p{
font-size: 18px;
}
}
@media only screen and (max-width: 480px) {
#toi h4{
font-size: 25px;
}
#toi p{
font-size: 16px;
margin: 0 3% 0;
}
}

#toi-bu{
display: flex;
width: 50%;
margin:30px 25% 0;
padding: 0;
justify-content:space-between;
}
#toi-bu a{
width: 32%;
}
#toi-bu img{
max-width: 100%;
}
@media only screen and (max-width: 1440px) {
#toi-bu{
width: 60%;
margin:30px 20% 0;
}
}
@media only screen and (max-width: 1080px) {
#toi-bu{
width: 80%;
margin:30px 10% 0;
}
}
@media only screen and (max-width: 835px) {
#toi-bu{
width: 90%;
margin:30px 5% 0;
}
}
@media only screen and (max-width: 640px) {
#toi-bu{
flex-direction: column;
gap: 20px;
}
#toi-bu a{
width: 60%;
margin: 0 0 0 40%;
}
}
@media only screen and (max-width: 480px) {
#toi-bu{
width: 80%;
gap: 10px;
margin:230px 10% 0;
}
#toi-bu a{
width: 100%;
margin: 0 0%;
}
}

/* フェードイン(基本) */
.js-fadeUp {
  opacity: 0; 
  transform: translateY(50px);
  transition: opacity .8s, transform 1.2s; 
}
.js-fadeUp.is-inview {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s; 
}

article{
width: 100%;
height: auto;
margin: 0;
padding: 150px 10% 80px;
background: #fff;
box-shadow: 0 0 20px #e2c2be;
}
@media only screen and (max-width: 1600px) {
article{
padding: 120px 10% 40px;
}
}
@media only screen and (max-width: 1280px) {
article{
padding: 120px 5% 20px;
}
}
@media only screen and (max-width: 835px) {
article{
padding: 40px 5% 20px;
}
}
@media only screen and (max-width: 480px) {
article{
padding: 20px 5% 20px;
}
}

article h1{
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 40px 3%;
text-align: center;
font-size: 35px;
font-weight: 700;
line-height: 100%;
color: #fff;
background: url(image/sub-h1-red.webp) no-repeat center top;
}
article h1.ser{
background: url(image/sub-h1-orange.webp) no-repeat center top;
}
article h2{
width: 100%;
height: auto;
margin:0 0 50px;
padding: 20px 3%;
text-align: center;
font-size: 30px;
font-weight: 700;
line-height: 100%;
color: #fff;
background: url(image/sub-h1-green.webp) no-repeat center top;
}
article #price h2{
background: url(image/sub-h1-brown.webp) no-repeat center top;
}
@media only screen and (max-width: 1080px) {
article h1{
margin: 0 0 50px;
padding: 30px 3%;
font-size: 30px;
}
}
@media only screen and (max-width: 835px) {
article h2{
margin:0 0 40px;
padding: 20px 3%;
font-size: 25px;
}
}
@media only screen and (max-width: 480px) {
article h1{
margin: 0 0 40px;
padding:25px 3%;
font-size: 25px;
}
article h2{
margin:0 0 30px;
padding:15px 3%;
font-size: 25px;
}
}
@media only screen and (max-width: 414px) {
article h1{
margin: 0 0 35px;
padding:25px 3%;
font-size: 22px;
}
article h2{
margin:0 0 30px;
padding:15px 3%;
font-size: 22px;
}
}

article p{
text-align: center;
font-size: 20px;
line-height: 180%;
margin: 0 0 40px;
}
article p strong{
font-size: 1.1em;
font-weight: 800;
}
article p .f30{
font-size: 30px;
font-weight: 800;
color: #e97a3d;
line-height: 180%;
}
@media only screen and (max-width: 835px) {
article p{
font-size: 18px;
}
}
@media only screen and (max-width: 640px) {
article p{
text-align: center;
font-size: 17px;
line-height: 170%;
margin: 0 0 35px;
}
article p .f30{
font-size: 28px;
line-height: 160%;
}
}
@media only screen and (max-width: 480px) {
article p{
text-align:justify;
font-size: 16px;
line-height: 160%;
margin: 0 0 30px;
}
article p .f30{
font-size: 26px;
}
}
@media only screen and (max-width: 414px) {
article p .f30{
font-size: 22px;
}
}

#sub-faq{
scroll-margin-top: 100px;
}

#sub-faq h3{
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 20px 5%;
text-align: center;
font-size: 25px;
line-height: 120%;
font-weight: 600;
background: #fbf5ee;
scroll-margin-top: 100px;
}
@media only screen and (max-width: 640px) {
#sub-faq h3{
margin: 0 0 40px;
padding: 20px 5%;
font-size: 20px;
}
}
@media only screen and (max-width: 480px) {
#sub-faq h3{
margin: 0 0 30px;
padding: 15px 5%;
}
}

.faq-sub{
width: 100%;
height: auto;
margin: 0;
padding: 0 10% 100px;
display: flex;
flex-direction: column;
gap: 30px;
}
.faq-set{
width: 100%;
height: auto;
margin: 0 0 30px;
}
@media only screen and (max-width: 1280px) {
.faq-sub{
padding: 0 5% 80px;
}
}
@media only screen and (max-width: 835px) {
.faq-sub{
padding: 0 0% 60px;
}
}
@media only screen and (max-width: 480px) {
.faq-sub{
padding: 0 0% 40px;
}
}

.faq-set p{
text-align: left;
font-size: 20px;
line-height: 180%;
margin: 0;
}
.faq-set p img{
margin: 0 10px 0 0;
vertical-align:middle;
max-width: 30px;
}
.faq-set p span{
color: #d94244;
font-size: 30px;
margin: 0 15px 0 -2.5em;
}
.faq-set p:first-of-type{
font-size: 25px;
font-weight: 600;
line-height: 120%;
margin: 0 0 20px;
padding: 0 0 10px;
border-bottom: 2px solid #d94244;
}
.faq-set p:last-of-type{
margin: 0 0 0 10%;
text-indent: 2em;
}
@media only screen and (max-width: 1080px) {
.faq-set p{
font-size: 18px;
}
.faq-set p img{
width: 35px;
}
.faq-set p span{
font-size: 25px;
margin: 0 15px 0 0em;
}
.faq-set p:first-of-type{
font-size: 22px;
}
.faq-set p:last-of-type{
margin: 0 0 0 0%;
text-indent: 0em;
}
}
@media only screen and (max-width: 640px) {
.faq-set p img{
width: 28px;
}
.faq-set p{
font-size: 17px;
}
.faq-set p:first-of-type{
margin: 0 0 10px;
}
}
@media only screen and (max-width: 480px) {
.faq-set p img{
width: 25px;
}
.faq-set p:first-of-type{
font-size: 20px;
}
.faq-set p{
font-size: 16px;
}
}
@media only screen and (max-width: 414px) {
.faq-set p img{
width: 20px;
}
.faq-set p:first-of-type{
font-size: 18px;
}
}

#sub-faq ol{
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 0;
display: flex;
gap: 15px;
justify-content: flex-start;
flex-wrap: wrap;
}
#sub-faq li{
display: block;
font-size: 16px;
line-height: 100%;
margin: 0 0 15px;
}
#sub-faq li a:link,#sub-faq li a:visited{
padding: 5px 15px;
text-decoration: none;
border: 1px solid #d94244;
border-radius: 60px;
color: #4a3937;
}
#sub-faq li a:hover{
background: #fbf5ee;
}
@media only screen and (max-width: 835px) {
#sub-faq ol{
margin: 0 0 60px;
}
#sub-faq li{
font-size: 14px;
}
}
@media only screen and (max-width: 640px) {
#sub-faq ol{
margin: 0 0 40px;
}
}

#sub-info{
width: 100%;
height: auto;
margin: 0 0 120px;
padding: 0;
}
#sub-info img{
max-width: 100%;
margin: 0 0 40px;
}
@media only screen and (max-width: 1080px) {
#sub-info{
margin: 0 0 100px;
}
}
@media only screen and (max-width: 640px) {
#sub-info{
margin: 0 0 80px;
}
}
@media only screen and (max-width: 480px) {
#sub-info{
margin: 0 0 50px;
}
}

#sub-info h2{
background: none;
background: url("image/toi-hand.png") no-repeat 30% center,url("image/toi-hand.png") no-repeat 70% center;
padding: 0;
margin:80px 0 20px;
color: #351e12;
font-size: 35px;
font-weight: 800;
}
@media only screen and (max-width: 1080px) {
#sub-info h2{
background: none;
background: url("image/toi-hand.png") no-repeat 20% center,url("image/toi-hand.png") no-repeat 80% center;
}
}
@media only screen and (max-width: 835px) {
#sub-info h2{
background: none;
background: url("image/toi-hand.png") no-repeat 20% center/30px,url("image/toi-hand.png") no-repeat 80% center/30px;
}
}
@media only screen and (max-width: 640px) {
#sub-info h2{
background: none;
background: url("image/toi-hand.png") no-repeat 10% center/25px,url("image/toi-hand.png") no-repeat 90% center/25px;
margin:60px 0 20px;
font-size: 30px;
}
}
@media only screen and (max-width: 480px) {
#sub-info h2{
background: none;
background: url("image/toi-hand.png") no-repeat left center/25px,url("image/toi-hand.png") no-repeat right center/25px;
margin:40px 0 20px;
font-size: 30px;
}
}
@media only screen and (max-width: 414px) {
#sub-info h2{
background: none;
background: url("image/toi-hand.png") no-repeat left center/20px,url("image/toi-hand.png") no-repeat right center/20px;
margin:40px 0 20px;
font-size: 25px;
}
}

#sub-info-toi{
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 40px 10%;
display: flex;
align-items: flex-start;
justify-content:center;
background: url(image/toi-left.png) no-repeat left top/25%,url(image/toi-right.png) no-repeat right top/25%;
}
#sub-info-toi img{
max-width: 38%;
margin: 0 2% 0 0;
}
@media only screen and (max-width: 1080px) {
#sub-info-toi{
padding: 35px 5%;
margin: 0;
}
}
@media only screen and (max-width: 480px) {
#sub-info-toi{
flex-direction: column;
padding: 30px 10%;
}
#sub-info-toi img{
max-width: 80%;
margin: 0 auto 15px;
}
}
@media only screen and (max-width: 414px) {
#sub-info-toi{
padding: 20px 5%;
}
#sub-info-toi img{
max-width: 90%;
}
}

#toi-bu2{
display: flex;
width: 60%;
margin:0;
padding: 0;
justify-content:space-between;
flex-direction: column;
gap: 20px;
}
#toi-bu2 a{
width: 70%;
}
#toi-bu2 img{
max-width: 100%;
}
@media only screen and (max-width: 1080px) {
#toi-bu2 a{
width: 80%;
}
}
@media only screen and (max-width: 835px) {
#toi-bu2 a{
width: 90%;
}
}
@media only screen and (max-width: 640px) {
#toi-bu2 a{
width: 100%;
}
}
@media only screen and (max-width: 480px) {
#toi-bu2{
width: 100%;
gap: 0px;
margin:0;
}
}

#ser{
width: 100%;
height: auto;
margin: 0 0 100px;
}
@media only screen and (max-width: 835px) {
#ser{
margin: 0 0 80px;
}
}
@media only screen and (max-width: 640px) {
#ser{
margin: 0 0 60px;
}
}
@media only screen and (max-width: 414px) {
#ser{
margin: 0 0 40px;
}
}

#ser dl{
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
.ser-item{
width: 22%; /* 4つ並べる場合は23%前後 */
display: flex;
flex-direction: column; /* 箱の中では「タイトル（dt）」と「本文（dd）」を縦に積む */
}
.ser-item img{
max-width: 100%;
margin: 0 0 20px;
}
#ser dt{
width: 100%;
font-weight: 600;
font-size: 25px;
line-height: 100%;
margin: 0 0 20px;
text-align: left;
background: url(image/nav.png) no-repeat right top;
}
#ser dd{
width: 100%;
text-align: left;
font-size: 20px;
margin: 0;
padding: 0;
line-height: 150%;
}
@media only screen and (max-width: 1280px) {
#ser dt{
font-size: 20px;
padding: 0 30px 0 0;
}
#ser dd{
font-size: 18px;
text-align: justify;
}
}
@media only screen and (max-width: 835px) {
#ser dl{
flex-wrap: wrap;
}
.ser-item{
width: 46%;
display: flex;
flex-direction: column;
margin: 0 0 30px;
}
.ser-item img{
max-width: 70%;
margin: 0 0 20px;
}
}
@media only screen and (max-width: 640px) {
#ser dt{
background: url(image/nav.png) no-repeat right top/20px;
}
#ser dd{
font-size: 17px;
}
}
@media only screen and (max-width: 480px) {
#ser dl{
flex-direction: column;
}
.ser-item{
width: 100%;
margin: 0 0 30px;
align-items: center;
}
.ser-item img{
max-width:50%;
margin: 0 0 10px;
}
#ser dt{
font-size: 25px;
padding: 0;
margin: 0 0 10px;
text-align: center;
}
#ser dd{
font-size: 16px;
}
}
@media only screen and (max-width: 414px) {
.ser-item img{
max-width:60%;
}
#ser dt{
font-size: 22px;
background: url(image/nav.png) no-repeat right top/18px;
}
}

#price{
width: 100%;
height: auto;
margin: 0;
padding: 0;
scroll-margin-top: 150px;
}

#price h3{
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align: center;
font-size: 30px;
font-weight: 600;
line-height: 120%;
scroll-margin-top: 150px;
}
#price h3 strong,#price h4 strong{
color: #e97a3d;
margin: 0 10px 0 0;
}
#price h4{
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align: center;
font-size: 25px;
font-weight: 600;
line-height: 120%;
}
#price h3 span,#price h4 span{
font-size: 20px;
margin: 0 0 0 10px;
font-weight: 400;
}
@media only screen and (max-width: 640px) {
#price h3{
font-size: 25px;
}
#price h4{
font-size: 20px;
}
#price h3 span,#price h4 span{
font-size: 16px;
}
}

#price ul{
width: 80%;
height: auto;
margin: 0 10% 80px;
padding: 40px 40px 20px;
border:2px solid #5b4b49;
border-radius: 15px;
}
@media only screen and (max-width: 1080px) {
#price ul{
width: 90%;
margin: 0 5% 60px;
padding: 40px 40px 20px;
}
}
@media only screen and (max-width: 835px) {
#price ul{
width: 100%;
margin: 0 0 50px;
padding: 40px 30px 20px;
}
}
@media only screen and (max-width: 640px) {
#price ul{
padding:40px 15px 20px;
}
}

#price ul li{
list-style-type: none;
text-align: left;
font-size: 20px;
line-height: 120%;
margin: 0 0 15px;
padding: 0 30px 15px;
border-bottom: 1px dashed #e97a3d;
display: flex;
justify-content: space-between;
}
#price ul li span{
font-weight: 500;
}
#price ul li span strong{
font-size: 1.2em;
font-weight: 800;
margin: 0 5px 0 0;
color: #e97a3d;
}
article #price ul p{
margin: 15px 0 0;
font-size: 16px;
}
@media only screen and (max-width: 835px) {
#price ul li{
font-size: 18px;
}
}
@media only screen and (max-width: 640px) {
#price ul li{
font-size: 17px;
padding: 0 20px 15px;
}
}
@media only screen and (max-width: 480px) {
#price ul li{
font-size: 16px;
padding: 0 0 15px;
}
}

/*フッタ
--------------------------------------------------------------------------*/
#page-top{
	width:40px;
	height:40px;
	display:none;
	position:fixed;
	right:16px;
	bottom:16px;
	color:#fff;
} 
#page-top p{
	margin:0;
	padding:0;
	text-align:center;
	background:#1c9a6b;
	transition:all 0.3s;
	color:#fff;
} 
#page-top p:hover{
	background:#181f59;
	color:#fff;
} 
#move-page-top{
	color:#fff;
	line-height:40px;
	text-decoration:none;
	display:block;
	cursor:pointer;
}

footer{
width: 100%;
height: auto;
margin: 0;
padding: 20px 5%;
background: #fff;
border-top:1px solid #351e12;
display: flex;
justify-content:space-between;
}
@media only screen and (max-width: 1600px) {
footer{
padding: 20px 2%;
}
}
@media only screen and (max-width: 640px) {
footer{
padding: 10px 2%;
}
}

address{
display: flex;
width: 45%;
font-style: normal;
}
footer h6{
text-align: left;
font-size: 25px;
font-weight: 600;
line-height: 150%;
margin: 0 15px 0 0;
padding: 0;
}
footer p{
text-align: left;
font-size:18px;
line-height: 160%;
margin: 0;
}
@media only screen and (max-width: 1440px) {
address{
width: 100%;
text-align: center;
align-items: center;
justify-content:center;
gap: 20px;
}
}
@media only screen and (max-width: 1280px) {
footer h6{
font-size: 20px;
margin: 0;
}
}
@media only screen and (max-width: 835px) {
footer h6{
font-size: 18px;
}
footer p{
font-size:16px;
}
}
@media only screen and (max-width: 640px) {
address{
flex-direction: column;
gap: 10px;
}
footer h6{
line-height: 100%;
}
footer p{
text-align: center;
}
}

nav{
width: 50%;
background: #351e12;
border-radius: 80px;
align-items: center;
display: flex;
padding: 0 30px;
}
nav ul{
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: flex;
justify-content:space-between;
}
nav li{
list-style-type: none;
font-size: 16px;
}
nav li a:link,nav li a:visited{
color: #fff;
text-decoration: none;
padding: 0 0 0 30px;
background: url(image/nav.png) no-repeat left 50%/20px;
}
@media only screen and (max-width: 1440px) {
nav{
display: none;
}
}