/*
Theme Name: geisei_theme
Author: Basara
Author URI: 
Version: 1.0
*/

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    backface-visibility: hidden;
}
html{ margin: 0; padding: 0;}
body {
    margin: 0;
    padding: 0;
    font-family: "Noto Sans JP", "Hiragino Sans","Meiryo", sans-serif;
    font-size: 16px;
	font-weight:500;
    color:#333;
    line-height:210%;
    word-break: break-all;
    overflow-x: hidden;
}
body.noscroll { overflow: hidden;}
div, p, ul, ul li, dl, dt, dd {
	margin: 0;
	padding: 0;
	font-size: 100%;
	list-style:none;
	box-sizing:border-box;
}
img, video, object {
    max-width: 100%;
    height: auto;
    border: none;
}
img {
	display: block;
	image-rendering: smoothe !important;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-size: 100%;
	line-height: 1.5;
}

a:link { color:#E2985B; text-decoration: underline; transition : all 0.5s ease 0s;}
a:visited { color:#E6B083;}
a[href^="tel:"] { text-decoration:none; pointer-events:none ; text-emphasis: none !important;}
a[href^="fax:"] { text-decoration:none; pointer-events:none ;}
@media only screen and (min-width:821px){
    a:hover {color:#E27B5B; text-decoration: underline;}
    a:hover img { opacity: 0.7; filter: alpha(opacity=70); -moz-opacity: 0.7;}
}

.pc {display: inherit;}
.pctb {display: inherit;}
.tb {display: none;}
.tbsp {display: none;}
.sp {display: none;}
@media only screen and (max-width:820px){
    .pc {display:none;}
    .pctb {display:block;}
    .tb {display:block;}
    .tbsp {display: block;}
    .sp {display:none;}
}
@media only screen and (max-width:468px){
    .pc {display:none;}
    .pctb {display:none;}
    .tb {display:none;}
    .tbsp {display: block;}
    .sp {display:block;}
}



/* =========================================================================================
Layout
=========================================================================================*/
#wrapper{
    position:relative;
    margin:0;
    padding:0;
    overflow: hidden;
}
#container{
    margin:0;
    padding:125px 0 0;
}
article {}
section {}
.inner {
    margin: 0 auto;
    padding: 150px 0;
    width: 90%;
    max-width: 1200px;
    position:relative;
    box-sizing:border-box;
}
@media only screen and (max-width:1000px){
    #container{ padding-top:72px;}
    .inner { padding: 100px 0;}
}
@media only screen and (max-width:468px){
    .inner { padding: 80px 0;}
}



/*=========================================================================================
Header
=========================================================================================*/
#header {
    position:fixed; top: 0; left: 0; z-index: 9999;
    width: 100%;
    background: rgba(255,255,255,0.90);
    transition: .3s;
}
body.noscroll #header { background:#fff;}
#header.fixhead {
    transform: translateY(-100%);
    background: rgba(255,255,255,0.90);
}
#header .inner {
    position: relative;
    display: flex; flex-wrap: wrap; justify-content:flex-end; align-items: center;
    padding: 0;
    width: 95%; max-width:inherit; height: 125px;
}

/* Logo */
#header h1 {
    position: absolute; top:0; left:0;
    width: 100%; max-width: 500px;
}
#header h1 a {
    display: block;
    width:100%; height: 125px; aspect-ratio: 988 / 138;
    display: block;
    text-indent: -9999px;
    background: url("images/logo2.png") no-repeat center center;
    background-size: 100% auto !important;
}

/* Navigation */
#nav ul { display: flex; gap:clamp(15px, calc(8px + 1vw), 30px);}
#nav ul li a {
    position: relative;
    font-family: "Kiwi Maru", serif;
    font-weight: 500;
    font-size: clamp(125%, 1.9vw, 118.8%);
    color: #333;
    text-decoration: none;
}
#nav ul li.sns span.sns_insta,
#nav ul li.sns span.sns_insta a {
    display: block;
    width: 30px; height: auto; aspect-ratio: 1 / 1;
}
#nav ul li.sns span.sns_insta a {
    text-indent: -9999px;
    background: url("images/common/icon_insta.svg") no-repeat;
    background-size: 100% auto;
}
#nav ul li.sns a::before { display: none !important;}
@media only screen and (min-width:821px){
    #header h1 { transition : .3s;}
    #header h1 a:hover { opacity: 0.7;}
}
@media only screen and (min-width:1001px){
    #nav ul li a::before {
        display: block; clear: both; content:"";
        position: absolute; bottom: -10px; left: 0;
        width: 0; height: 3px;
        background: #E2985B;
        transition: .3s;
    }
    #nav ul li a:hover { color: #E2985B;}
    #nav ul li a:hover::before { width: 100%;}
}
@media only screen and (max-width:1330px){
    #header h1 { width:30%;}
}
@media only screen and (max-width:1180px){
    #header h1 { width:180px;}
    #header h1 a { background: url("images/logo3.png") no-repeat center center; }
}
@media only screen and (max-width:1000px){
    #header { padding:0; z-index: 9999;} 
    #header .inner {
		justify-content: flex-start;
        width: 100%; height: auto;
    }
    #header h1 { position: static; top: 0; left: 0; width:400px; height:70px; padding: 12px 10px 0;}
    #header h1 a {
        display: block;
        width:100%; height:auto; aspect-ratio: 988 / 138;
        display: block;
        text-indent: -9999px;
        background: url("images/logo2.png") no-repeat center center;
        background-size: 100% auto;
    }
    .nav_btn {
        display: block !important;
        cursor: pointer;
        position:fixed; top:0; right:0;
        width:70px; height:70px;
        box-sizing: border-box;
        z-index: 999999999;
    }
    .nav_btn span {
        display: inline-block;
        position: absolute; left:0 !important; right: 0 !important; margin:auto;
        width:34px; height:4px;
        background:#333;
        transition: all .3s;
        border-radius: 4px;
    }
    .nav_btn span:nth-of-type(1) { top:20px;}
    .nav_btn span:nth-of-type(2) { top:33px;}
    .nav_btn span:nth-of-type(3) { top:46px;}
    .nav_btn small { position: absolute; bottom:0; width: 100%; font-size: 10px; text-align: center;}
    .nav_btn.active span:nth-of-type(1) { top:33px; transform:rotate(-45deg);}
    .nav_btn.active span:nth-of-type(2) { opacity: 0;}
    .nav_btn.active span:nth-of-type(3) { top:33px; transform:rotate(45deg);}
    #header #nav {
        display:none;
        position: absolute; top:69px; right: 0;
        width: 100%; height: calc(100vh - 69px);
        overflow: auto;
        background: #fff;
    }
    #nav ul { flex-direction: column; gap:0; padding: 20px 0 150px;}
    #nav ul li { position: relative; margin: auto; width:90%;}
    #nav ul li + li { border-top:1px solid #ddd;}
    #nav ul li a {
        display: block;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
    }	
    #nav ul li.sns { padding-top: 20px;}
    #nav ul li.sns .sns_insta { margin: auto;}
}
@media only screen and (max-width:468px){
    #header h1 { width:calc(100% - 70px - 10px);}
}



/*=========================================================================================
Footer
=========================================================================================*/
#footer { background:#fff; border-top:3px solid #C8AD8D;}
#footer .f_cont:nth-child(1) { background: #fff;}
#footer .f_cont:nth-child(1) .inner { padding:70px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap:40px;}
#footer .f_cont:nth-child(2) { background: #FAF4E7;}
#footer .f_cont:nth-child(2) .inner { padding:50px 0; max-width: none;}

/* Address and Map */
#footer .add { position: relative; padding-top:190px; width: 410px;}
#footer .add .illust { position:absolute; top:-26%; width:92%; z-index:8;}
#footer .add .logo {
    pposition: relative; z-index:9;
    font-family: "Kiwi Maru", serif;
    font-weight: 500;
    font-size: 187.5%;
}
#footer .add ul { display: flex; flex-direction: column; gap:5px;}
#footer .add ul li { display: flex; flex-wrap: wrap; gap:10px 20px;}
#footer .add ul li div:nth-child(1) {
    position: relative; top: 5px;
    display: block;
    width: 85px; height: 25px; line-height: 23px;
    font-size: 87.5%;
    text-align: center;
    border: 1px solid #333;
}
#footer .add ul li div:nth-child(2) {
    display: flex; flex-wrap: wrap; gap:0 15px;
    width: calc(100% - 85px - 20px);
    line-height: 155%;
}
#footer .add ul li div:nth-child(2) span { display: inline-block;}
#footer .add ul li a[href^="http://maps.apple.com"]{
    pointer-events:none;
    text-decoration:none;
    color:inherit;
}
#footer .map { width:calc(100% - 410px - 40px); height: 100%;}
#footer .map iframe { width:100%; height:425px;}

/* NAV */
#footer ul.f_nav { 
    display: flex; flex-wrap: wrap; justify-content: center; gap:30px;
    margin-bottom: 30px;
}
#footer ul.f_nav li a { color: #333; text-decoration:none;}
#footer ul.f_nav li.sns span.sns_insta,
#footer ul.f_nav li.sns span.sns_insta a {
    display: block;
    width: 30px; height: auto; aspect-ratio: 1 / 1;
}
#footer ul.f_nav li.sns span.sns_insta a {
    text-indent: -9999px;
    background: url("images/common/icon_insta.svg") no-repeat;
    background-size: 100% auto;
}

/* COPYRIGHT */
#footer .copy { font-size:87.5%; text-align: center;}

@media only screen and (min-width:821px){
    #footer ul.f_nav li a:hover { color: #E27B5B; text-decoration:none;}
}
@media only screen and (max-width:1350px){
    #footer .f_cont:nth-child(1) .inner { align-items: flex-start;}
}
@media only screen and (max-width:820px){
    #footer .f_cont:nth-child(1) .inner { flex-direction: column;}
    #footer .add { margin: auto;}
    #footer .map { width:100%;}
    #footer .map iframe { width:100%; height:auto; aspect-ratio: 6 / 4;}
}
@media only screen and (max-width:468px){
    #footer .f_cont:nth-child(1) .inner {  padding-bottom:4%;}
    #footer .add { padding-top:130px; width: 100%;}
    #footer .add .illust { top:-100px; left:0; right:0; margin:0 auto; width:280px;}
    #footer .add .logo { font-size:150%;}
    #footer .add ul { gap:10px;}
    #footer .add ul li { flex-direction: column;}
    #footer .add ul li div:nth-child(1),
    #footer .add ul li div:nth-child(2) { width: 100%;}
    #footer .add ul li:nth-child(1),
    #footer .add ul li div:nth-child(2) { font-size: 87.5%; line-height: 150%;}
    #footer .f_nav li:nth-child(-n+6) { display: none;}
}



/* =========================================================================================
Page Top
=========================================================================================*/
#page-top { position: fixed; right: 20px; bottom: 20px; z-index: 999; }
#page-top,
#page-top a { display: block; width: 80px; height: 80px;}
#page-top a {
    text-indent: -9999px;
    background:#C8AD8D url("images/common/icon_pagetop.svg") no-repeat center center;
    background-size: 44% auto;
    border-radius: 100px;
}
@media only screen and (min-width:821px){
    #page-top a:hover{opacity: 0.7;}
}
@media only screen and (max-width:820px){
    #page-top,
    #page-top a { width: 60px; height: 60px;}
}
@media only screen and (max-width:468px){
    #page-top,
    #page-top a { width: 40px; height: 40px;}
}



/* =========================================================================================
Post list
=========================================================================================*/
.post-list{
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 30px 0;
}
.post-list ul{
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.post-list ul li{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 10px 20px;
}
.post-list ul li .thumbnail{
    position: relative;
    border: 1px solid #000;
}
.post-list ul li .thumbnail img{
    object-fit: cover;
    aspect-ratio: 3 / 2;
    width: 100%;
}
.post-list ul li .thumbnail .new{
    position: absolute;
    top: 10px;
    left: 10px;
    color: #FFF;
    font-size: small;
    background: #000;
    padding: 2px 10px 0;
}
.post-list .title{
    font-size: 1.25em;
    font-weight:700;
}
.post-list .title a{
    color: #000;
}
.post-list .title a:hover{
    text-decoration: none;
    opacity: 0.7;
}
.post-list ul li .date{
    width:100px;
}
.post-list ul li .cat{
    font-size: 0.9em;
    width:100px;
    height: auto;
    text-align: center;
    padding: 2px 5px 0;
    border: 1px solid #000;
}
.post-list ul li .tag{
    padding: 10px 0;
    display: flex;
    align-items: start;
    justify-content: left;
    flex-wrap: wrap;
    gap:10px;
}
.post-list ul li .tag .icon{
    font-size: 0.9em;
    height: auto;
    text-align: center;
    display: inline-block;
    padding: 0.25em 1.0em 0.2em;
    border: 1px solid #CCC;
    background: #CCC;
}

/* card */
.post-list.card ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: stretch;
    flex-direction: row;
    gap: 30px;
}
.post-list.card li{
    padding: 1.0em;
    width: calc( ( 100% - 60px ) / 3 );
    border: 1px solid #000;
    flex-direction: column;
    gap: 20px;
}
@media only screen and (max-width:820px){
    .post-list ul li .cat{ width:fit-content;}
    .post-list ul li .title{ width: 100% }
    /* card */
    .post-list.card li{ width: calc( ( 100% - 30px ) / 2 ); }
}
@media only screen and (max-width:468px){
    /* card */
    .post-list.card li{ width: 100%; }
}



/* =========================================================================================
Archive-Page
=========================================================================================*/
.archive .post-list {
    border-top:none;
    border-bottom:none;
    padding:0;
}

/*pagination*/
.page-numbers {
    display: flex; justify-content: center; gap:15px;
    margin: 50px auto 0;
}
.page-numbers li { position: relative;}
.page-numbers li a,
.page-numbers li span {
    position: relative;
    display: block;
    width: 56px; height: auto; aspect-ratio: 1 / 1;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    line-height: 56px;
    color: #533D33;
    background-color:#E3D5C5;
    border-radius: 100px;
    box-sizing: border-box;
    transition: 0.3s ease-in-out;
}
.page-numbers li .prev,
.page-numbers li .next { text-indent: -9999px; background-size: 15px auto!important;}
.page-numbers li .prev { background:#E3D5C5 url("images/arrow_l2.svg") no-repeat center center;}
.page-numbers li .next { background:#E3D5C5 url("images/arrow_r2.svg") no-repeat center center;}
.page-numbers li .current { color: #fff; background:#C8AD8D; border-color:#C8AD8D;}
.page-numbers li .current::before { display: none;}
@media only screen and (min-width:821px){
    .page-numbers a:hover::before,
    .page-numbers span:hover::before { display: block;}
    .page-numbers a:hover,
    .page-numbers span:hover { color: #fff; background-color:#C8AD8D; border-color:#C8AD8D;}
}
@media only screen and (max-width:820px){
    .page-numbers { margin: 30px auto 0;}
}
@media only screen and (max-width:468px){
    .page-numbers { gap:5px; margin: 20px auto 0;}
    .page-numbers li a::before,
    .page-numbers li span::before { width:42px;}
    .page-numbers li a,
    .page-numbers li span { width: 42px; line-height: 38px;}
}



/* =========================================================================================
Single-Page
=========================================================================================*/
#single_page .sb_content { padding-top: 40px; }
@media only screen and (max-width:820px){
}
@media only screen and (max-width:468px){
}



/* single navI */
.single-navi {
    display: flex; justify-content: center; gap:15px;
    margin: 50px auto 0;
}
.single-navi div { position: relative; display: block; width: 130px;}
.single-navi a {
    display: block;
    padding: 0 20px;
    font-size: 87.5%;
    font-weight: 700;
    color:#533D33;
    text-decoration: none;
    line-height: 50px;
    background-color: #E3D5C5;
    background-size: 15px auto!important;
    border-radius: 40px;
    box-sizing:border-box;
}
.single-navi .prev-navi { text-align: right;}
.single-navi .back-navi { text-align: center;}
.single-navi .prev-navi a { background:#E3D5C5 url("images/arrow_l2.svg") no-repeat 15% center;}
.single-navi .next-navi a { background:#E3D5C5 url("images/arrow_r2.svg") no-repeat 85% center;}
.entry-content + .single-navi { margin-top: 50px;}
@media only screen and (min-width:809px){
    .single-navi a:hover,
    .single-navi span:hover {background-color:#C8AD8D;}
    .single-navi .prev-navi a:hover { background-position: 13% center;}
    .single-navi .next-navi a:hover { background-position: 88% center;}
}
@media only screen and (max-width:468px){
    .single-navi { position: relative; padding-bottom: 60px;}
    .single-navi .back-navi { position: absolute; left: 0; right: 0; bottom: 0; margin: auto;}
    .single-navi:not(:has(.prev-navi)) .back-navi,
    .single-navi:not(:has(.next-navi)) .back-navi { position:static; margin: 0;}
}



/* =========================================================================================
Free-Page
=========================================================================================*/
#free_page .sb_content { padding-top: 40px; }
@media only screen and (max-width:820px){
}
@media only screen and (max-width:468px){
}



/* =========================================================================================
Page(404)
=========================================================================================*/
#error404 .inner { display: flex; flex-direction: column; justify-content: center; gap:40px;}
#error404 .entry-header{
    text-align: center;
    padding:0;
    margin: 0 ;
}
#error404 .error-message{
    padding: 0 20px;
    text-align: center;
}
#error404 .error-message p img{
    margin: 0 auto;
    max-width: 250px;
}
#error404 .btn { margin: auto;}
@media only screen and (max-width:820px){
}
@media only screen and (max-width:468px){
}



/* =========================================================================================
 Header Title ( Single / Archive / Page )
=========================================================================================*/
.entry-header {}
.entry-header h1 {
    display: flex; justify-content: center; align-items: center;
    margin-left: 20px;
    height: 400px;
    font-family: "Kiwi Maru", serif;
    font-size: clamp(187.5%, 4vw, 312.5%);
    font-weight:500;
    color: #fff;
    text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);
    background: url("images/tit_other.jpg") no-repeat center center;
    background-size: cover !important;
    border-top-left-radius: 70px;
    border-bottom-left-radius: 70px;
}
#about .entry-header h1 { background: url("images/tit_about.jpg") no-repeat center center;}
#siratama .entry-header h1 { background: url("images/tit_sirotamato.jpg") no-repeat center center;}
#goods .entry-header h1 { background: url("images/tit_goods.jpg") no-repeat center center;}
@media only screen and (max-width:820px){
    .entry-header h1 {
        height: 300px;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
    }
}
@media only screen and (max-width:468px){
    .entry-header h1 {
        margin-left: 5px;
        height: 200px;
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
    }
}



/* =========================================================================================
Breadcrumbs ( Single / Archive / Page )
=========================================================================================*/
.breadcrumbs {
    display: flex;
    margin: auto;
    padding: 30px 0;
    width: 90%; max-width: 1200px;
    font-size: 87.5%;
    color:#A38F86;
}
.breadcrumbs li + li::before { content:"-"; padding: 0 10px;}
.breadcrumbs li:nth-child(1) {
    padding-left: 25px;
    background: url("images/pan_home.svg") no-repeat left center;
    background-size: 16px auto;
}
.breadcrumbs li a { color:#A38F86;}
@media only screen and (max-width:820px){
}
@media only screen and (max-width:468px){
    .breadcrumbs { display: none;}
}



/* =========================================================================================
  Editer
=========================================================================================*/


/*Hr*/
.wp-block-separator{
    height: 1px;
    border: none;
    background-color: #ddd;
    margin: 5vh 0;
}
.wp-block-separator.is-style-dots:before{
    font-size: 3.0em;
    letter-spacing: 1.0em;
    padding-left: 1.0em;
}


/*Midashi*/
h1, h2, h3, h4 {
    font-family: "Kiwi Maru", serif;
	font-weight:500;
    color: #533D33;
}
.txt_o { color: #E2985B;}
.txt_b { color: #533D33;}
.fs_50 { font-size: clamp(187.5%, 4.5vw, 312.5%);} /* 50→45→30 */
.fs_40 { font-size: clamp(168.2%, 3.5vw, 250%);} /* 40→35→27 */
.fs_36 { font-size: clamp(137.5%, 3vw, 225%);} /* 36→30→22 */
.fs_30 { font-size: clamp(156.2%, 2.7vw, 187.5%);} /* 30→27→25 */
h1.wp-block-heading {
    position: relative;
    padding-bottom: 25px;
    font-size: clamp(168.2%, 4vw, 250%);
    text-align: center;
}
h1.wp-block-heading small { display: block; font-size: 75%;}
h1.wp-block-heading::before {
    display: block; clear: both; content:"";
    position: absolute; left: 0; right: 0; bottom: -30px;
    margin: auto;
    width: 100%; height:auto; max-width: 476px; aspect-ratio: 476 / 35;
    background:url("images/fukidasi02.png") no-repeat center center;
    background-size: 100% auto;
}
h2.wp-block-heading {
    margin: 40px auto 20px;
    padding-bottom: 20px;
    font-size: clamp(137.5%, 3vw, 225%);
	color: #533D33;
    border-bottom: 5px solid #533D33;
}
h3.wp-block-heading {
    margin: 40px auto 20px;
    padding:10px 20px;
    font-size: clamp(156.2%, 2.7vw, 187.5%);
    color: #E2985B;
    background: #FDF7ED;
    border: 3px solid #E2985B;
    border-radius: 10px;
}
h4.wp-block-heading {
    margin: 20px auto 20px;
    color: #E2985B;
    font-size: clamp(125%, 2.3vw, 156.2%);
}
@media only screen and (max-width:820px){
    h1.wp-block-heading { letter-spacing: -1px;}
    h1.wp-block-heading::before { max-width: 400px;}
}
@media only screen and (max-width:468px){
}


/* Button */
a.wp-block-button__link,
.btn a {
    position: relative;
    display: block;
    padding:0 55px 0 30px;
    line-height: 54px;
    font-family: "Kiwi Maru", serif;
    font-size: 112.5%;
    color: #6D5C55;
    text-decoration: none;
    border-radius: 100px;
    box-sizing: border-box;
    transition : all 0.5s ease 0s;
}
a.wp-block-button__link::before,
.btn a::before {
    display: block; clear: both; content:"";
    position: absolute; top:50%; right:10px;
    transform: translateY(-50%);
    width: 36px; height: auto; aspect-ratio: 1 / 1;
    background:#E2985B url("images/arrow_r.svg") no-repeat center center;
    background-size: 15px auto;
    border-radius: 100px;
    transition : all 0.5s ease 0s;
}
.btn.btn1 { max-width: 240px;}
.btn.btn2 { max-width: 240px;}
a.wp-block-button__link,
.btn.btn1 a {
    background: #fff;
    border: 3px solid #E2985B;
}
.btn.btn2 a {
    color: #fff;
    text-align: center;
    background: #E2985B;
    border: 3px solid #E2985B;
}
@media only screen and (min-width:821px){
    a.wp-block-button__link:hover::before,
    .btn a:hover::before { right: 7px;}
    a.wp-block-button__link:hover,
    .btn.btn1 a:hover { color: #E2985B; background: #FBF6EB;}
    .btn.btn2 a:hover { background: #E27B5B; border: 3px solid #E27B5B;}
    .btn.btn2 a:hover::before { background-color: #E27B5B;}
}


/*blockquote*/
blockquote{
    position:relative;
    padding: 20px;
    background:#f5f5f5;
}
blockquote cite {
    display: block;
    font-size: 0.8rem;
    text-align: right;
    color: #808080;
    padding-right:20px;
}
@media only screen and (min-width:821px){
}
@media only screen and (max-width:820px){
}
@media only screen and (max-width:468px){
}



/* =========================================================================================
Original_item
=========================================================================================*/


/* background */
.bg {
    background:url("images/bg1.png") no-repeat center 220px, url("images/bg2.png") no-repeat center 2190px;
}
@media only screen and (max-width:820px){
    .bg {
        background-position:center 240px, center 2000px;
        background-size: 120% auto, 120% auto;
    }
}
@media only screen and (max-width:468px){
    .bg {
        background:url("images/bg1_sp.png") no-repeat center 50px, url("images/bg2_sp.png") no-repeat center 2000px;
        background-size: 100% auto, 100% auto;
    }
}



/* kadomaru */
.kado40 { border-radius: 40px;}
.kado70 { border-radius: 70px;}
@media only screen and (max-width:820px){
    .kado40 { border-radius: 30px;}
    .kado70 { border-radius: 50px;}
}
@media only screen and (max-width:468px){
    .kado40 { border-radius: 20px;}
    .kado70 { border-radius: 30px;}
}











/* =========================================================================================
Page(About)
=========================================================================================*/
/* introduction */
#about .introduction {
    background: url("images/geisei_map.png") no-repeat top center;
}
#about .introduction .inner {
    display: flex; flex-direction: column; gap:60px 0;
    padding: 280px 0 0;
    max-width: inherit;
}
#about .introduction h2 { text-align: center; font-weight: 500; line-height:130%;}
#about .introduction .comment { margin: auto; max-width:800px;}
#about .introduction .point { 
    position: relative;
    display: flex; flex-wrap: wrap; justify-content: center; gap:0 30px;
    margin: auto;
    max-width: 1250px;
}
#about .introduction .point::before,
#about .introduction .point::after {
    display: block; clear: both; content:"";
    position: absolute; bottom:-30px; z-index: 9;
    width: 100%; height: auto;
    background-size: 100% auto !important;
}
#about .introduction .point::before {
    left: 24%;
    max-width: 210px; aspect-ratio: 420 / 320;
    background:url("images/illust/illust05.png") no-repeat;
}
#about .introduction .point::after {
    right: 25%;
     max-width: 210px; aspect-ratio: 420 / 320;
    background: url("images/illust/illust06.png") no-repeat;
}
#about .introduction .point dl {
    width: 33.3%; height: auto; min-width: 320px; max-width:390px; aspect-ratio:  1 / 1;
    background-size: 100% 100%  !important;
}
#about .introduction .point dl:nth-child(1) { background: url("images/bg_circle1.png") no-repeat;}
#about .introduction .point dl:nth-child(2) { background: url("images/bg_circle2.png") no-repeat;}
#about .introduction .point dl:nth-child(3) { background: url("images/bg_circle3.png") no-repeat;}
#about .introduction .point dt {
    margin: 30% 0 35px;
    font-family: "Kiwi Maru", serif;
	font-weight:500;
    color: #533D33;
    text-align: center;
}
#about .introduction .point dd { margin: auto; width: 80%;}
@media only screen and (max-width:1250px){
    #about .introduction .point::before { left: 10%; max-width: 190px;}
    #about .introduction .point::after { right: 10%; max-width: 190px;}
    #about .introduction .point dt { margin: 25% 0 25px;}
    #about .introduction .point dd { width: 75%;}
}
@media only screen and (max-width:820px){
    #about .introduction { background-size: 600px auto;}
    #about .introduction .inner { gap:40px;}
    #about .introduction .point { margin-top: 40px;}
    #about .introduction .point::before { bottom: 0; left: 3%; max-width: 160px;}
    #about .introduction .point::after { bottom: 0; right: 3%; max-width: 160px;}
    #about .introduction .point dt { margin: 22% 0 30px;}
}
@media only screen and (max-width:468px){
    #about .introduction { background-position: center 40px; background-size:120% auto;}
    #about .introduction .inner { gap:30px; padding: 150px 0 60px;}
    #about .introduction .point {
        margin-top: 20px;
        padding: 50px 20px;
        flex-direction: column;
        gap:60px;
        background: #EDDEB6;
        border-radius: 30px;
    }
    #about .introduction .point::before,
    #about .introduction .point::after { bottom: -60px;}
    #about .introduction .point::before { left: 3%; max-width: 120px;}
    #about .introduction .point::after { right: 3%; max-width: 120px;}
    #about .introduction .point dl { aspect-ratio:auto;  min-width:inherit; width: 100%; background: none!important;}
    #about .introduction .point dt { margin: 0 0 30px;}
    #about .introduction .point dd { width: 100%;}
}



/* Activity */
#about .activity h3 {
    display: flex; justify-content: center; gap:10px;
    position: absolute; top:100px; left:0; right: 0; z-index: 9;
    margin: auto;
    width: 100%;
    max-width:500px;
    background: #fff;
}
#about .activity h3::before {
    display: block; clear: both; content:"";
    position: absolute; top: -30px; left: 0;
    width: 100%; height: auto; max-width: 55px;  aspect-ratio: 117 / 119;
    background: url("images/fukidasi04.png") no-repeat;
    background-size: 100% auto;
}
#about .activity h3 span {
    display: block;
    color: #fff;
    text-align: center;
    line-height:103px;
    width: 100%; height:auto; max-width: 103px;  aspect-ratio: 1 / 1;
    background: url("images/bg_circle4.png") no-repeat;
    background-size: 100% auto;
}
#about .activity .activity_list {
    display: flex; flex-wrap: wrap; gap:40px 0; justify-content: center;
    padding: 100px 0;
    border-top:7px solid #E2985B;
    border-bottom:7px solid #E2985B;
}
#about .activity .activity_list .box { padding: 0 3%; width: 33.3%;}
#about .activity .activity_list .photo img {
    margin: auto;
    width: 150px; height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 150px;
}
#about .activity .activity_list h4 {
    margin: 15px auto;
    text-align: center;
}
#about .activity .activity_list h4 span { position: relative;}
#about .activity .activity_list h4 span::before,
#about .activity .activity_list h4 span::after {
    display: block; clear: both; content:"";
    position: absolute; bottom: 0;
    width: 100%; height:auto; max-width: 27px;  aspect-ratio: 56 / 66;
    background-size: 100% auto !important;
}
#about .activity .activity_list h4 span::before {
    left: -40px;
    background: url("images/fukidasi03_l.png") no-repeat;
}
#about .activity .activity_list h4 span::after {
    right: -40px;
    background: url("images/fukidasi03_r.png") no-repeat;
}
#about .activity .activity_list .comment { margin: auto; max-width: 280px; text-justify:inter-character;}
@media only screen and (max-width:1000px){
    #about .activity h3 { top:55px;}
}
@media only screen and (max-width:820px){
    #about .activity h3 { top:55px; max-width:400px;}
    #about .activity h3 span { max-width:80px; line-height: 80px;}
    #about .activity .activity_list .box { padding: 0 3%; width:50%;}
}
@media only screen and (max-width:468px){
    #about .activity  h3 { gap:5px; top:55px; max-width:230px;}
    #about .activity  h3::before {  top: -20px; left: -10px;  max-width: 30px; }
    #about .activity  h3 span { max-width:50px; line-height:50px;}
    #about .activity .activity_list { padding: 60px 0;}
    #about .activity .activity_list .box { padding:0; width:100%;}
}



/* =========================================================================================
Page(Shiratama)
=========================================================================================*/
/* Satoukibi */
#siratama .satoukibi .inner {
    display:flex; flex-direction: column; gap:100px;
    max-width: 1000px;
    padding-top:100px;
}
#siratama .satoukibi .box { display:flex; flex-wrap: wrap; align-items: center; gap:40px 10%;}
#siratama .satoukibi .box .photo { width: 55%; }
#siratama .satoukibi .box .cont {
    position: relative;
    display: flex; flex-direction: column; gap:40px;
    width: calc(100% - 55% - 10%);
}
#siratama .satoukibi .box.row_re { flex-direction: row-reverse;}
#siratama .satoukibi .box:nth-child(3) .cont::before {
    display: block; clear: both; content:""; z-index: 9;
    position: absolute; right:-40px; top: -160px;
    width: 100%; height: auto; max-width: 210px;  aspect-ratio: 420 / 320;
    background: url("images/illust/illust07.png") no-repeat;
    background-size: 100% auto;
}
@media only screen and (max-width:820px){
    #siratama .satoukibi .inner { gap:80px;}
    #siratama .satoukibi .box { gap:40px 5%;}
    #siratama .satoukibi .box .photo { width: 50%;}
    #siratama .satoukibi .box .cont {  width: calc(100% - 50% - 5%); }
    #siratama .satoukibi .box:nth-child(3) .cont::before { right:-40px; top: -140px; max-width: 190px;}
}
@media only screen and (max-width:468px){
    #siratama .satoukibi .inner { gap:60px;}
    #siratama .satoukibi .box { flex-direction: column !important; gap:30px 0;}
    #siratama .satoukibi .box .photo,
    #siratama .satoukibi .box .cont { width:100%; }
    #siratama .satoukibi .box .btn { margin: auto;}
    #siratama .satoukibi .box:nth-child(3) .cont::before { right:-10px; top: inherit; bottom: -110px; max-width:160px;}
}



/* Flow */
#siratama .flow .inner { display:flex; flex-direction: column; gap:100px;}
#siratama .flow h2 {
    display: flex; justify-content: center; align-items: center;
    margin: auto;
    width: 90%; max-width: 1200px;
    height: 350px;
    font-family: "Kiwi Maru", serif;
    font-size: clamp(187.5%, 4vw, 312.5%);
    font-weight:500;
    color: #fff;
    background: url("images/tit_flow.jpg") no-repeat center center;
    background-size: cover;
    border-radius: 70px;
}
#siratama .flow .flow_list { display:flex; flex-direction: column; gap:100px; margin: auto; max-width: 1000px;}
#siratama .flow .box { position: relative; display:flex; flex-wrap: wrap; align-items: center; gap:40px 10%;}
#siratama .flow .box .photo { width: 55%; }
#siratama .flow .box .cont { width: calc(100% - 55% - 10%); display: flex; flex-direction: column; gap:20px;}
#siratama .flow .box h3 span { position: relative;}
#siratama .flow .box h3 span::before {
    display: block; clear: both; content:"";
    position: absolute;
    width: 100%; height: auto; max-width: 55px; aspect-ratio: 117 / 119;
    background: url("images/fukidasi04.png") no-repeat;
    background-size: 100% auto;
}
#siratama .flow .box:nth-child(odd) h3 span::before { top: -40px; left: -55px;}
#siratama .flow .box:nth-child(even) h3 span::before { top: -40px; right: -55px;  transform: scale(-1, 1);}
#siratama .flow .box::before {
    display: block; clear: both; content:"";
    position: absolute; left: 0; right: 0;
    margin: auto;
    width:35%; height: auto;
    background-size: 100% auto !important;
}
#siratama .flow .box:nth-child(2)::before {
    top: -140px;
    max-width: 321px; aspect-ratio: 687 / 335;
    background: url("images/flow1.png") no-repeat;
}
#siratama .flow .box:nth-child(3)::before {
    top: -100px;
    max-width: 322px; aspect-ratio: 673 / 297;
    background: url("images/flow2.png") no-repeat;
}
#siratama .flow .box:nth-child(4)::before {
    top: -140px;
    max-width: 312px; aspect-ratio: 657 / 307;
    background: url("images/flow3.png") no-repeat;
}
#siratama .flow .box:nth-child(5)::before {
    top: -100px;
    max-width: 322px; aspect-ratio: 673 / 297;
    background: url("images/flow4.png") no-repeat;
}
#siratama .flow .box:nth-child(2)::after,
#siratama .flow .box:nth-child(5)::after {
    display: block; clear: both; content:"";
    position: absolute; z-index: 9;
    width: 100%; height: auto;
    background-size: 100% auto !important;
 }  
#siratama .flow .box:nth-child(2)::after {
    left:0; top: -130px;
    max-width: 210px; aspect-ratio: 420 / 320;
    background: url("images/illust/illust08.png") no-repeat;
    background-size: 100% auto;
}
#siratama .flow .box:nth-child(5)::after {
    right:-130px; top: -140px;
    max-width: 210px; aspect-ratio: 420 / 320;
    background: url("images/illust/illust09.png") no-repeat;
}
#siratama .flow .box.row_re { flex-direction: row-reverse;}
@media only screen and (max-width:820px){
    #siratama .flow h2 { height: 250px; border-radius: 50px;}
    #siratama .flow .flow_list { gap:80px;}
    #siratama .flow .box { align-items: flex-start; gap:40px 5%;}
    #siratama .flow .box .photo { width: 50%;}
    #siratama .flow .box .cont {  width: calc(100% - 50% - 5%);}
    #siratama .flow .box h3 span::before { max-width: 35px;}
    #siratama .flow .box:nth-child(odd) h3 span::before { top: -20px; left: -35px;}
    #siratama .flow .box:nth-child(even) h3 span::before { top: -20px; right: -35px;}
    #siratama .flow .box::before { width: 25%;}
    #siratama .flow .box:nth-child(2)::before { top: -120px;}
    #siratama .flow .box:nth-child(3)::before { top: -80px;}
    #siratama .flow .box:nth-child(4)::before { top: -120px;}
    #siratama .flow .box:nth-child(5)::before { top: -80px;}
    #siratama .flow .box:nth-child(2)::after { top: -100px; max-width: 190px;}
    #siratama .flow .box:nth-child(5)::after { top: -100px; right: 0; max-width: 190px;}
}
@media only screen and (max-width:468px){
    #siratama .flow h2 { width: 96%; height: 200px; border-radius: 30px;}
    #siratama .flow .flow_list { gap:60px;}
    #siratama .flow .box { flex-direction: column !important; gap:30px 0;}
    #siratama .flow .box .photo,
    #siratama .flow .box .cont { width:100%; }
    #siratama .flow .box h3 { text-align: center;}
    #siratama .flow .box .btn { margin: auto;}
    #siratama .flow .box::before { display: none;}
    #siratama .flow .box:nth-child(2)::after { top: -80px; max-width: 160px;}
    #siratama .flow .box:nth-child(5)::after { top: -80px; max-width: 160px;}
}



/* Youtube */
#siratama .youtube .inner { position: relative; padding-top: 0;}
#siratama .youtube .inner::before {
    display: block; clear: both; content:"";
    position: absolute; left:-60px; top: -60px; z-index: 9;
    width: 100%; height: auto; max-width: 210px; aspect-ratio: 420 / 320;
    background: url("images/illust/illust10.png") no-repeat;
    background-size: 100% auto;
}
#siratama .youtube .movie {
    margin: auto;
    max-width: 1000px; aspect-ratio: 16 / 9;
    border: 10px solid #E2985B;
    overflow: hidden;
}
#siratama .youtube .movie iframe { width: 100%; height: 100%;}
@media only screen and (max-width:820px){
    #siratama .youtube .inner::before { top: -100px; max-width: 190px;}
    #siratama .youtube .movie { border: 7px solid #E2985B;}
}
@media only screen and (max-width:468px){
    #siratama .youtube .inner::before { top: -80px; max-width: 160px;}
    #siratama .youtube .movie { border: 5px solid #E2985B;}
}



/* =========================================================================================
Page(Goods)
=========================================================================================*/
/* Shiratama */
#goods .siratama .inner {
    display:flex; flex-direction: column; gap:100px;
    max-width: 850px;
    padding-top:100px;
}
#goods .siratama .box { display:flex; flex-wrap: wrap; align-items: center; gap:40px 7%;}
#goods .siratama .box .photo { width:50%;}
#goods .siratama .box .photo img { margin: auto; max-width: 400px; }
#goods .siratama .box .cont {
    position: relative;
    display: flex; flex-direction: column; gap:40px;
    width: calc(100% - 50% - 7%);
}
@media only screen and (max-width:820px){
    #goods .siratama .inner { gap:80px; }
    #goods .siratama .box .photo img { max-width:100%; }
}
@media only screen and (max-width:468px){
    #goods .siratama .box { flex-direction: column !important;}
    #goods .siratama .box .photo,
    #goods .siratama .box .cont { width:100%; }
    #goods .siratama .box .photo img { max-width: 200px; }
}



/* Resipe */
#goods .recipe {
    position:relative;
    margin: auto; max-width: 1400px;
    background: #EDDEB6;
    border-radius: 70px;
}
#goods .recipe .inner { padding: 90px 0;}
#goods .recipe h2 {
    position:absolute; top:-25px; left: 0; right: 0;
    margin: auto;
    width: 100%;
    line-height:120%;
    color: #533D33;
    text-align: center;
    color:#533D33;
    -webkit-text-stroke: 10px #fff;
    paint-order: stroke;
}
#goods .recipe h2::before {
    display: block; clear: both; content:"";
    position: absolute; left:0; top: -105px; z-index: 9;
    width: 100%; height: auto; max-width: 210px; aspect-ratio: 420/ 320;
    background: url("images/illust/illust11.png") no-repeat;
    background-size: 100% auto;
}
#goods .recipe h2 span { position: relative;}
#goods .recipe h2 span::before {
    display: block; clear: both; content:"";
    position: absolute; left:-50px; top:-30px;
    width: 100%; height: auto; max-width: 55px; aspect-ratio: 117 / 119;
    background: url("images/fukidasi04.png") no-repeat;
    background-size: 100% auto;
}
#goods .recipe .recipe_list { display: flex; gap:30px;}
#goods .recipe .recipe_list .box {
    width: calc(100% - 33.3%);
    background: #fff;
    overflow: hidden;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
}
#goods .recipe .recipe_list .box .photo img {
    width: 100%; height: auto; aspect-ratio: 380 / 260;
    object-fit: cover;
}
#goods .recipe .recipe_list .box .cont { 
    display: flex; flex-direction: column; gap:20px;
    padding: 40px 30px 30px;
}
#goods .recipe .recipe_list .box .cont h3 {
    text-align: center;
}
@media only screen and (max-width:820px){
    #goods .recipe { border-radius: 50px;}
    #goods .recipe h2::before { left:-40px; top: -90px; max-width: 190px;}
    #goods .recipe .recipe_list { gap:20px;}
    #goods .recipe .recipe_list .box .cont { gap:20px; padding: 30px 15px 20px;}
}
@media only screen and (max-width:468px){
    #goods .recipe { margin-top:80px; border-radius: 30px;}
    #goods .recipe::before { max-width: 130px;}
    #goods .recipe .inner { padding: 60px 0 5%;}
    #goods .recipe h2::before { left:0; right:0; top:-110px; max-width: 160px; margin: auto;}
    #goods .recipe .recipe_list { flex-direction: column; gap:20px 0;}
    #goods .recipe .recipe_list .box { width: 100%;}
}



/* Pickup */
#goods .pickup .inner { max-width: 1000px;}
#goods .pickup .pickup_list { display:flex; flex-direction: column;}
#goods .pickup .box { display:flex; flex-wrap: wrap; align-items: center; gap:40px 0;}
#goods .pickup .box .photo { position: relative;}
#goods .pickup .box .cont {
    position: relative;
    display: flex; flex-direction: column; gap:20px;
    max-width: 300px;
}
#goods .pickup .box.row_re { flex-direction: row-reverse;}
#goods .pickup .box:nth-child(1) .photo { width: 65%;}
#goods .pickup .box:nth-child(1) .cont { width:calc(100% - 65%);}
#goods .pickup .box:nth-child(2) .photo { width: 55%;}
#goods .pickup .box:nth-child(2) .photo img { max-width:57%;}
#goods .pickup .box:nth-child(2) .cont { width:calc(100% - 55%); }
#goods .pickup .box:nth-child(3) .photo { width: 65%; right: -10%;}
#goods .pickup .box:nth-child(3) .cont { width:calc(100% - 65%);}
#goods .pickup .btn.b_ec,#goods .pickup .btn.b_bc { position: relative; margin:150px auto 0; max-width: 820px;}
#goods .pickup .btn.b_ec a,
#goods .pickup .btn.b_bc a{
    line-height: 130px;
    text-align: center;
    color: #fff;
    background: #E2985B;
    transition : all 0.5s ease 0s;
}
#goods .pickup .btn.b_ec a::before,
#goods .pickup .btn.b_bc a::before,{ display: none;}
#goods .pickup .btn.b_ec a span,
#goods .pickup .btn.b_bc a span{
    margin: 0 10px;
    font-family: "Kiwi Maru", serif;
    font-weight:500;
}
#goods .pickup .btn.b_ec a span:nth-child(1) { font-size: clamp(112.5%, 2.3vw, 262.5%);}
#goods .pickup .btn.b_bc a span:nth-child(1) { font-size: clamp(86%, 2.3vw, 202.5%);}
#goods .pickup .btn.b_ec a span:nth-child(2) { font-size: clamp(168.5%, 3.5vw, 250%);}
#goods .pickup .btn.b_ec::before,
#goods .pickup .btn.b_bc::before{
    display: block; clear: both; content:"";
    position: absolute; right:-80px; bottom: -80px; z-index: 9;
    width: 100%; height: auto; max-width: 210px; aspect-ratio: 420/ 320;
    background: url("images/illust/illust12.png") no-repeat;
    background-size: 100% auto;
}
@media only screen and (min-width:821px){
    #goods .pickup .btn.b_ec a:hover,#goods .pickup .btn.b_bc a:hover {background:#E27B5B;}
}
@media only screen and (max-width:820px){
    #goods .pickup .inner { gap:80px;}
    #goods .pickup .btn.b_ec,#goods .pickup .btn.b_bc { margin-top:100px;}
    #goods .pickup .btn.b_ec a,#goods .pickup .btn.b_bc a { line-height: 100px;}
    #goods .pickup .btn.b_ec::before,#goods .pickup .btn.b_bc::before { right:-40px; max-width: 190px; }
}
@media only screen and (max-width:468px){
    #goods .pickup .pickup_list { gap:60px;}
    #goods .pickup .box { flex-direction: column !important; gap:30px;}
    #goods .pickup .box .photo,
    #goods .pickup .box .cont { width:100% !important; max-width: inherit;}
    #goods .pickup .box .photo { position: static; text-align: center;}
    #goods .pickup .box .photo img { margin: auto;}
    #goods .pickup .box:nth-child(1) .photo img { max-width:280px;}
    #goods .pickup .box:nth-child(2) .photo img { max-width:150px;}
    #goods .pickup .box:nth-child(3) .photo img { max-width:280px;}
    #goods .pickup .box .cont { gap:20px;}
    #goods .pickup .box h3 { text-align: center;}
    #goods .pickup .btn.b_ec { margin-top:80px;}
    #goods .pickup .btn.b_ec a { padding: 20px 0; line-height:150%;}
    #goods .pickup .btn.b_ec a span { display: block;}
    #goods .pickup .btn.b_ec::before { max-width: 160px; }
}



/* =========================================================================================
Page(News)
=========================================================================================*/
#news .inner { padding-top: 100px;}
.news_list { border-bottom: 1px solid #ddd;}
.news_list .box {  border-top: 1px solid #ddd;}
.news_list .box a { display:flex; flex-wrap: wrap; gap:5px 25px; padding: 22px 20px;}
.news_list .box a span { line-height: 150%;}
.news_list .box a span:nth-child(1) { width:90px; color:#333; text-decoration: none;}
.news_list .box a span:nth-child(2) { width:calc(100% - 90px - 25px); }
.news_list .box a:link { color: #333; text-decoration: none;}
@media only screen and (min-width:821px){
    .news_list .box a:hover span:nth-child(2) { color:#E27B5B; text-decoration: underline;}
}
@media only screen and (max-width:820px){
}
@media only screen and (max-width:468px){
    .news_list .box a { flex-direction: column;}  
    .news_list .box a span:nth-child(1),
    .news_list .box a span:nth-child(2) { width:100%; }
}



/* =========================================================================================
Page(contact)
=========================================================================================*/
#contact .inner { padding-top: 100px;}
#contact table.mailform {
    margin: auto;
    width: 100%;
    border-spacing: 0;
    border:none !important;
    border-top: 1px solid #ccc !important;
}
#contact table.mailform th,
#contact table.mailform td {
    padding:15px 0;
    border-right:none !important;
    border-bottom: 1px solid #ccc !important;
    background: none !important;
}
#contact table.mailform th { width:250px; text-align: left; vertical-align: top;}
#contact table.mailform label {font-weight:700;}
#contact table.mailform input[type="tel"],
#contact table.mailform input[type="text"],
#contact table.mailform input[type="date"],
#contact table.mailform input[type="email"],
#contact table.mailform input[type="number"],
#contact table.mailform textarea {
	padding:5px 10px;
    width:100%;
	border:1px solid #EEE;
	background:#f6f6f6;
	box-sizing:border-box;
	border-radius:5px;
}
#contact table.mailform textarea { height:200px;}
#contact table.mailform select { padding:5px 10px; border:1px solid #EEE; background:#FAFAFA;}
#contact table.mailform input[type="file"] { display:block; padding:5px; background:#F6F6F6;}
#contact table.mailform input:focus,
#contact table.mailform textarea:focus {
    background:rgba(144,202,197,0.10);
    outline: none; 
}
#contact table.mailform .txt_namae { max-width:360px;}
#contact table.mailform .txt_other { max-width:360px;}
#contact table.mailform .txt_telfax { max-width:360px;}
#contact table.mailform .txt_mail { max-width:520px;}
#contact table.mailform .txt_add { max-width:520px;}
#contact table.mailform th span {
    position: relative;
    display: inline-block;
    margin-left:10px;
    width: 50px; height: 20px; line-height: 20px;
    color: #fff;
    font-size: 10px;
    text-align: center;
    background:rgba(217,66,68,1.00);
    border-radius: 30px;
}
#contact table.mailform .h10 { max-height: 100px;}
#contact table.mailform .w10 { max-width: 100px;}
#contact table.mailform .w20 { max-width: 200px;}
#contact table.mailform .w40 { max-width: 400px;}
#contact table.mailform .w60 { max-width: 600px;}
#contact .b_box {
    display: flex; justify-content: center; gap:10px 20px;
    margin-top: 40px;
}
#contact .b_inqu input[type="submit"],
#contact .b_inqu input[type="reset"],
#contact .b_inqu input[type="button"]{
    cursor: pointer;
	font-family: 'Noto Sans JP', "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	margin:0 10px;
	padding:10px;
	width:200px;
	font-weight:bold;
	font-size:140%;
	border:none;
	color:#FFF;
    border-radius: 50px;
    transition : all 0.5s ease 0s;
}
#contact .b_inqu input[type="submit"] { background:#E2985B;}
#contact .b_inqu input[type="reset"] { background:#555;}
#contact .b_inqu input[type="button"] { background:#555;}

/* ERROR */
#contact .error_mess { display: flex; flex-direction: column; gap:20px;}
#contact .error_mess .error_mid { font-size: 125%; text-align: center; color: rgba(212,0,3,1.00);}
#contact .error_mess .comment { text-align: center;}
#contact .error_mess .error_list { padding: 20px; background: rgba(212,0,3,0.10);}

/* CONFIRMATION */
#contact .confi_mess { display: flex; flex-direction: column; gap:20px;}
#contact .confi_mess .confi_mid { font-size: 125%; text-align: center;}
#contact .confi_mess .comment { text-align: center;}

@media only screen and (min-width:821px){
    #contact table.mailform input[type="text"]:focus,
    #contact table.mailform textarea:focus { background:#FFEFEF; transition:.3s;}
    #contact .b_inqu input[type="submit"]:hover,
    #contact .b_inqu input[type="reset"]:hover,
    #contact .b_inqu input[type="button"]:hover { opacity: 0.7; filter: alpha(opacity=70);}
}
@media only screen and (max-width:820px){
    #contact table.mailform { border-top:none !important;}
    #contact table.mailform,
    #contact table.mailform tbody,
    #contact table.mailform tr,
    #contact table.mailform th,
    #contact table.mailform td {
        table-layout:auto !important;
        display:block !important;
        width:100% !important;
        height:auto !important;
        box-sizing: border-box !important;
    }
    #contact table.mailform input[type="tel"],
    #contact table.mailform input[type="text"],
    #contact table.mailform input[type="email"],
    #contact table.mailform textarea { width: 100%; max-width: inherit;}
    #contact table.mailform td { border-bottom: none !important;}
    #contact .b_box { flex-direction: column;}
    #contact .b_box p { margin: auto;}
}