@charset "UTF-8";
/* CSS Document */

fieldset {
    border: none !important;
}

.hidden-fields-container {
    border: none !important;
}

.wpcf7-form-control {
    border: none !important;
}

.reason-mt2{margin-top: 2rem;}

.span-reason{
	font-size: 12px;
}


/* ======================================= */
/* 共通・PC（デスクトップ）用の設定 (縦書き) */
/* ======================================= */

/* 全体を囲むラッパー */
.top-main-section-wrapper {
    position: relative; 
    min-height: 500px; 
    overflow: hidden; 
}

/* 1. 画像の配置 (画面左端に固定) */
.top-main-left-image {
    position: absolute; 
    top: 0;
    left: -10px; 
	width: 40%;
    max-width: 680px;
    z-index: 10; 
    height: 416px;
}

.top-main-left-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	margin: 0;
	padding: 0;
}

/* 2. テキストのコンテナ (max-width: 1200pxで右寄せ) */
.top-main-container {
    max-width: 1200px; 
    margin-left: auto; 
    margin-right: 0;
    padding-left: 20px;
    padding-right: 0;
    position: relative; 
    z-index: 20; 
}

/* 3. テキストの内容と位置調整 - PC（縦書き）*/
.top-main-right-text {
	float: right;
    /* 画像の幅分だけ左側に余白を作る */
    margin-left: 0; 
    
    /* PC: 縦書きの設定 */
    writing-mode: vertical-rl;
    text-orientation: mixed; 
    
    /* テキストがコンテナの右端に揃うように */
    text-align: left;
    
    /* 縦書きなので、上下に十分な余白を設定 */
    padding-top: 0px;
    padding-bottom: 50px;
    
    /* 縦書きの行間調整 */
    line-height: 1.8;
}

/* h2, p要素のスタイルは、この外側にまとめて記述すると便利です */
.top-main-right-text h2 {
    font-size: 2rem;
    margin-bottom: 0em;
}

.top-main-right-text p {
    font-size: 18px;
    margin-top: 0em;
}

/* ======================================= */
/* スマホ (最大幅768px以下) 用の設定 (横書き) */
/* ======================================= */

@media (max-width: 768px) {
    /* スマホ用に画像の幅を調整 */
    :root {
        --image-width-mobile: 100%; /* 画像を画面幅いっぱいに使う想定 */
    }
    
    /* セクションの高さはコンテンツに応じて可変に */
    .top-main-section-wrapper {
        min-height: auto;
        padding-top: 20px; /* 上部に余白 */
    }
    
    /* 1. 画像の配置 - スマホ */
    .top-main-left-image {
        /* position: absolute; を解除し、通常フローに戻す */
        position: static; 
        width: 100%; /* 画面幅いっぱい */
        height: auto;
        margin-bottom: 20px; /* 画像の下に余白 */
    }
    
    .top-main-left-image img {
        /* スマホでは画像全体が見えるようにobject-fit: contain; も選択肢 */
        height: auto;
        object-fit: contain;
    }
    
    /* 2. テキストのコンテナ - スマホ */
    .top-main-container {
        /* 中央揃えに変更 (必要に応じて) */
        margin-left: auto;
        margin-right: auto;
        max-width: 90%; /* スマホの画面幅に合わせて調整 */
    }
    
    /* 3. テキストの内容と位置調整 - スマホ（横書き）*/
    .top-main-right-text {
        /* 横書きに戻すための設定 */
        writing-mode: horizontal-tb;
        text-orientation: initial; 
        
        /* PCで設定した余白をリセットまたは調整 */
        margin-left: 0; 
        padding-top: 0;
        padding-bottom: 20px;
        line-height: 1.6;
        
        /* テキストを左揃えに */
        text-align: left;
    }
    
    .top-main-right-text h2 {
        /* 横書きになったので、改行を調整 */
        margin-bottom: 10px;
    }
}

.footer-logo{
	text-align: center;
	margin: auto;
	width: 346px;
	height: auto;
	margin-bottom: 1.5rem;	
}

/* features.php */
.u-features{
	margin-top: 2.5rem;
}

.u-features h2{
	font-size: 28px;
    font-family: "ten-mincho-text", serif;
    font-weight: 400;
    font-style: normal;	
	margin-top: 0;
	margin-bottom: 0.75rem;
	line-height: 1.8;
}

.u-features h3{
	font-size: 24px;
    font-family: "ten-mincho-text", serif;
    font-weight: 400;
    font-style: normal;	
	margin-top: 0;
	margin-bottom: 1.75rem;
	line-height: 1.8;
}

.u-features p{
	font-size: 16px;
	margin: 0;
	padding: 0;
	margin-bottom: 1rem;
    font-family: "ten-mincho-text", serif;
    font-weight: 400;
    font-style: normal;	
	text-align: justify;
	line-height: 1.8;
}

.u-features__box__r{
	width: 45%;
	float: right
}

.u-features__box__l{
	width: 53%;
	float: left;
}


/* about.php */
.u-about{
	margin-top: 2.5rem;
}

.u-about h2{
	font-size: 28px;
    font-family: "ten-mincho-text", serif;
    font-weight: 400;
    font-style: normal;	
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.u-about p{
	font-size: 16px;
	margin: 0;
	padding: 0;
	margin-bottom: 1rem;
    font-family: "ten-mincho-text", serif;
    font-weight: 400;
    font-style: normal;	
	text-align: justify;
	line-height: 1.8;
}

.u-about__box__r{
	width: 45%;
	float: right
}

.u-about__box__l{
	width: 53%;
	float: left;
}

.about-prod{
	margin: 0;
	padding: 20px 20px 2px 20px;
	text-align: center;
    align-items: center;
    justify-content: center;
    color: #333333;
    border-radius: 2px;
    box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.15);
}

.about-prod p{
	margin-top: 0.5rem;
    font-family: Roboto, "Noto Sans JP", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif
}

.about-prod img{
	text-align: center;
}

/* reason.php */
.u-reason{
	margin-top: 2.5rem;
}

.u-reason h2{
	font-size: 28px;
    font-family: "ten-mincho-text", serif;
    font-weight: 400;
    font-style: normal;	
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.u-reason p{
	font-size: 16px;
	margin: 0;
	padding: 0;
	margin-bottom: 1rem;
    font-family: "ten-mincho-text", serif;
    font-weight: 400;
    font-style: normal;	
	text-align: justify;
	line-height: 1.8;
}

.reason-top{
	width: 100%;
	min-height: 330px;
	overflow: hidden;
	background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
	background-attachment: inherit;
	background-position: top;
}

.reason-top h2{
	font-size: 42px;
    font-family: "ten-mincho-text", serif;
    font-weight: 400;
    font-style: normal;	
	margin-bottom: 0.75rem;
}

.reason-top p{
	font-size: 18px;
	margin: 0;
	padding: 0;
	margin-bottom: 1rem;
    font-family: "ten-mincho-text", serif;
    font-weight: 400;
    font-style: normal;	
	line-height: 1.8;
	text-align: justify;
}

.reason-section-wrapper {
    position: relative; 
    min-height: 500px; 
    overflow: hidden; 
}

.reason-product-section-wrapper {
    position: relative; 
    min-height: 500px; 
    overflow: hidden; 
}

.reason-light-image {
    position: absolute; 
    top: 0;
    right: -10px; 
	width: 30%;
    max-width: 680px;
    z-index: 10; 
    height: 416px;
}

.reason-light-kyusyu-image{
    position: absolute; 
    top: 0;
    right: -10px; 
	width: auto;
	height: 500px;
    z-index: 10;
}

.reason-light-image img,
.reason-light-kyusyu-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
	margin: 0;
	padding: 0;
}

.reason-left-text{
	width: 70%;
	height: auto;
}

ul.reason{
	width: 100%;
	height: auto;
	overflow: hidden;
	margin: 0 !important;
}

ul.reason li.reason-eel{
	width: 50%;
	display: inline-block;
	margin: 0 5% 2% 0;
	list-style: none;
	vertical-align: top;
	text-align: left;
}

ul.reason li.reason-new-brand{
	width: 25%;
	max-width: 400px;
	display: inline-block;
	margin: 0 0 2% 5%;
	list-style: none;
	vertical-align: top;
	text-align: left;
}

.reason-product-section-wrapper {
    position: relative; 
    min-height: 500px; 
    overflow: hidden; 
}

.reason-product-light-koku-image {
    position: absolute; 
    top: 0;
    right: -13px; 
	width: 60%;
    z-index: 10; 
    height: 416px;
}

.reason-product-light-image {
    position: absolute; 
    top: 0;
    right: -13px; 
	width: 60%;
    z-index: 10; 
    height: 416px;
}

.reason-product-left-image {
    position: absolute; 
    top: 0;
    left: -13px; 
	width: 60%;
    z-index: 10; 
    height: 416px;
}

.reason-shiwake-left-image {
    position: absolute; 
    top: 0;
    left: -13px; 
	width: 60%;
    z-index: 10; 
    height: 650px;
}

.reason-product-light-koku-image img,
.reason-product-light-image img,
.reason-product-left-image img,
.reason-shiwake-left-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
	margin: 0;
	padding: 0;
}

.product-water{
	margin-left: 10%;
	width: 10%;
}

.product-garlic{
	margin-left: auto;
	margin-right: 10%;
	width: 10%;
}

.reason-product-water-section-wrapper {
	margin-top: -8rem;
    position: relative; 
    min-height: 500px; 
    overflow: hidden; 
}

.reason-product-garlic-section-wrapper {
	margin-top: -6rem;
    position: relative; 
    min-height: 500px; 
    overflow: hidden; 
}

.reason-product-kurozu-section-wrapper{
	margin-top: -7rem;
    position: relative; 
    min-height: 500px; 
    overflow: hidden; 	
}

.reason-product-shiwake-section-wrapper{
	margin-top: 2rem;
    position: relative; 
    min-height: 500px; 
    overflow: hidden; 	
}

.product-water-eel {
    position: absolute; 
    top: 0;
    left: -13px; 
	width: 38%;
    z-index: 10; 
    height: 416px;
}

.product-koku-eel {
    position: absolute; 
    top: 0;
    left: -13px; 
	width: 38%;
    z-index: 10; 
    height: 416px;
}

.product-garlic-img {
    position: absolute; 
    top: 0;
    right: -13px; 
	width: 38%;
    z-index: 10; 
    height: 416px;
}

.product-shiwake-img {
    position: absolute; 
    top: 0;
    right: -13px; 
	width: 38%;
    z-index: 10; 
    height: 416px;
}

.product-shiwake-img img,
.product-koku-eel img,
.product-garlic-img img,
.product-water-eel img{
    width: 100%;
    height: 100%;
    object-fit: cover;
	margin: 0;
	padding: 0;
}

.product-point{
	margin-top: 0;
    position: relative; 
    min-height: 400px; 
    overflow: hidden; 	
}

.product-water-text{
    position: absolute; 
    top: 35%;
    right: 0; 
	width: 60%;
    z-index: 10; 
}

.product-koku-text{
    position: absolute; 
    top: 35%;
    right: 0; 
	width: 60%;
    z-index: 10; 
}

.product-garlic-text{
    position: absolute; 
    top: 30%;
    left: 0; 
	width: 60%;
    z-index: 10; 
}

.product-shiwake-text{
    position: absolute; 
    top: 30%;
    left: 0; 
	width: 60%;
    z-index: 10; 
}

.product-shiwake-text p,
.product-koku-text p,
.product-garlic-text p,
.product-water-text p{
	font-size: 22px;
}

/* hometown-tax.php */
.u-tax{
	margin-top: 2.5rem;
}

.u-tax h2{
	font-size: 28px;
    font-family: "ten-mincho-text", serif;
    font-weight: 400;
    font-style: normal;	
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.u-tax h3{
	font-size: 22px;
    font-family: "ten-mincho-text", serif;
    font-weight: 400;
    font-style: normal;	
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.u-tax p{
	font-size: 16px;
	margin: 0;
	padding: 0;
	margin-bottom: 1rem;
    font-family: "ten-mincho-text", serif;
    font-weight: 400;
    font-style: normal;	
	text-align: justify;
	line-height: 1.8;
}

.tax-top-under{
	text-align: center;
	width: 492px;
	margin: auto;
}

.hometown-tax-whopper{
	padding: 50px 125px;
	background-color: #e9eff8;
}

a.btn_23 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 100%;
	margin: auto;
	padding: 1rem 0;
	font-weight: normal;
	font-size: 20px;
	border: 2px solid #27acd9;
	color: #27acd9;
	cursor: pointer;
	position: relative;
 	overflow: hidden;
 	z-index: 1;
}
a.btn_23::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(39, 172, 217);
	transform: translateX(-100%);
	transition: all .6s;
	z-index: -1;
}
a.btn_23:hover::before {
	transform: translateX(0);
}
a.btn_23:hover {
	color: #fff;
}

/* info */
#info h1{
	text-align: center;
	font-size: 24px;
	font-family: "Shippori Mincho B1", serif;
	font-weight: 500;
	color: #111111;	
	margin-bottom: 3rem;
}

#info p{
	font-size: 16px;
	font-family: "Shippori Mincho B1", serif;
	font-weight: 500;
}

#info .item{
	display: block;
	border-bottom: 0.5px solid #000000;
	margin-bottom: 1.5rem;
}

/* お問合せフォーム */
ul.contact_box {
    width: 100%;
    height: auto;
    background: #f8f8f8;
    padding: 5%;
	margin: 2rem 0;
}

ul.contact_box li.left{
	width: 29%;
}

ul.contact_box li.left p,
ul.contact_box li.right p{
	font-size: 14px!important;
}

ul.contact_box li.right{
	background-color: #FFFFFF;
	padding: 3px 0 3px 5px;
}

ul.contact_box li{
	display: inline-block;
	list-style: none;
	vertical-align: middle;
	font-size: 14px!important;
}

ul.contact_box li.right{
	width: 68%;
	font-size: 14px!important;
}

ul.contact_box li.all{
	width: 100%;
	height: 40px;
	display: block;
	font-size: 15px!important;
}

@media (max-width: 768px) {
ul.contact_box {
	width: 90%;
}
}