@charset "UTF-8";

/*共通
---------------------------------------------------------------------------*/
:root {
	--themecolor: #235b9e;
	--maincolor: #111111;
}

/*ページ内リンクずれ
---------------------------------------------------------------------------*/
html {
scroll-padding-top: 200px;
}
#main {
width: 100%;
box-sizing: border-box;
margin: 0 auto;
padding: 100px 0;
overflow: hidden;
}
@media screen and (min-width: 1200px) {
.container{
max-width: 1200px;
margin: 0 auto;
padding: 0;
}}

/*google-maps
---------------------------------------------------------------------------*/
.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

/*hr
---------------------------------------------------------------------------*/
hr {
border-width: 1px 0 0 0; /* 太さ */
border-style: dotted; /* 線種 */
border-color: var(--maincolor);
height: 1px; /* 高さ */
max-width: 100%;
clear:both;
margin: 4% 0px;
}


/*title
---------------------------------------------------------------------------*/
#title {
width: 100%;
height: 300px;
overflow: hidden;
}
/* 背景画像 + h2コンテナ */
#title .bg_img {
position: relative; /* 子要素絶対配置用 */
width: 100%;
height: 100%;
}
/* 背景画像 */
#title .bg_img img {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
max-width: 70%;
margin-inline: calc(50% - 50vw); /* 右側だけブラウザ端まで広げる */
object-fit: cover;
object-position: center;
z-index: 1;
}
/* h2文字 */
#title .titleh2 {
position: relative;
max-width: 1200px;
height: 300px;
width: 100%;
margin: 0 auto;
z-index: 2;
display: flex;
align-items: flex-end; /* 下揃え */
}

#title .titleh2 h2 {
position: absolute;/* 絶対配置で親の下端に固定 */
bottom: 0; /* 親の下端に合わせる */
left: 0; 
font-size: 1.8rem;
font-weight: 700;
line-height: 1.8;
color: #111;
text-align: left;
background: url(../img/body_bg.jpg) repeat;
display: block;
padding: 5% 150px 0 0;
margin: 0;
letter-spacing: 0.08em;
}
@media screen and (max-width: 1200px) {
#title {
height: 200px;
}
#title .bg_img img {
max-width: 80%;
margin-inline: 0;
}
#title .titleh2 {
padding-left: 0;
height: 200px;
}
#title .titleh2 h2 {
font-size: 1.5rem;
padding: 7% 15% 0 5%;
}
}
@media (max-width:980px){
#title .bg_img img {
max-width: 90%;
}
}
@media (max-width:767px){
#title .bg_img img {
max-width: 100%;
}
}


/*tex
---------------------------------------------------------------------------*/
.tex, .tex_archive {
width: 100%;
text-align: justify;
text-justify: inter-ideograph;
overflow: hidden;
font-weight: 500;
}
.tex {
padding: 50px 0;
}
.tex_archive {
padding: 10% 0;
}
.tex img {
border: 0;
max-width: 100%;
height: auto;
box-sizing: border-box;
}
.tex p{
margin: 0;
padding: 0;
}
.tex img a {
border: 0;
}
.tex a:hover,
.tex a:hover img {
opacity: 0.6;
transition: 0.5s;
}
.tex a {
text-decoration: underline;
text-decoration-style:dotted;
text-decoration-color:#ccc;
}
@media screen and (min-width:768px) {
.tex {
padding: 60px 0
}
.tex_archive {
padding: 5% 0
}
}

/* 等分
---------------------------------------------------------------------------*/
.boxA {
display: flex;
flex-direction: column;
gap: 10px;
}
.box2 {
flex: 0 0 48%;
box-sizing: border-box;
}
@media screen and (min-width: 768px) {
.boxA {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
gap: 4%;
}
.box2 {
flex: 0 0 48%; /* 幅48% */
}
}
@media screen and (max-width: 767px) {
.boxA:nth-of-type(2) .box2:nth-child(1) { order: 2; }
.boxA:nth-of-type(2) .box2:nth-child(2) { order: 1; }
}

/* ボックス*/
.box_nuri {
padding: 1.5em 2em;
margin: 2em 0;
background: #f5f5f5;/*背景色*/
}
.box_nuri p,
.box_waku p{
margin: 0; 
padding: 0;
}
.box_waku {
padding: 2em;
margin: 2em 0;
border: 1px solid var(--maincolor);
}


/*見出し
---------------------------------------------------------------------------*/
h3.midasi {
color: var(--maincolor);
font-size: 1.4em;
line-height: 1.2em;
font-weight: 700;
margin-bottom: 15px;
padding: 0 .7em;
border-left: 5px solid var(--maincolor);
}
h4.midasi {
font-size: 1.2em;
font-weight: 700;
line-height: 1.4em;
margin: 0.5em 0;
padding: 0.5em 0;
border-bottom: 1px dotted var(--maincolor);
}
h4.midasi2 {
font-size: 1.2em;
font-weight: 700;
line-height: 1.4em;
padding: 0.8rem 2rem;
color: #fff;
background: var(--maincolor);
margin: 20px 0
}
h5.midasi {
color: var(--maincolor);
font-size: 1.1em;
line-height: 1.5em;
padding: 0.3em 0;
margin: 0.5em 0;
}
@media screen and (min-width:768px) {
h3.midasi{font-size: 1.5em;line-height: 1.6em;}
h4.midasi,h4.midasi2{font-size: 1.3em;line-height: 1.4em;}
h5.midasi {font-size: 1.2em;line-height: 1.3em;}
}


/* ---------------------------------------------------------------------------------------------

　 table

--------------------------------------------------------------------------------------------- */
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
margin: 10px 0;
text-align: left;
}
table tr {
border-bottom: 1px solid #bbbbbb;
}
table td{
padding: 10px;
margin-bottom: 0;
vertical-align: middle;
}
table td:nth-child(1) {
width: 30%;
}
table tr:first-child td {
border-top: 1px solid #bbbbbb;
}

/* 入力確認のチェックボックスを大きく */
form .wpcf7-acceptance input[type="checkbox"] {
transform: scale(2.0);
margin-right: 0.5em;
}
/* CF7チェックボックスを縦並びに */
.wpcf7-checkbox .wpcf7-list-item {
margin-top:5px;
display: block;
}
/* CF7ラジオボタンを縦並びに */
.wpcf7-radio .wpcf7-list-item {
margin-top:5px;
display: block;
}

/* その他 */
table.sonota td:nth-child(1){
vertical-align: middle;
font-size: 1em
}
table.sonota td {
margin-bottom: 0;
vertical-align: middle;
}

@media screen and (min-width: 768px) {
table.sonota td{
padding: 20px 20px 20px 0;
}
table.sonota td:nth-child(1){
width:30%;
}
}
@media all and (max-width: 767px) {
table.sonota td {
display: block;
width: 100%;
border: none;
padding: 0 0 10px 0;
}
table.sonota tr:first-child td{
border: none;
}
table.sonota tr:first-child td:nth-child(1){
border-top: 1px solid #bbbbbb;
}
table.sonota td:nth-child(1){
padding: 10px 0 0 0;
}
}


/*　申し込みフォーム
---------------------------------------------------- */
.contactform-width {
max-width: 100%;
}

.cf7__list {
display: flex;
flex-wrap: wrap;
margin-bottom: 60px;
}

.cf7__list dt:nth-of-type(n + 2),
.cf7__list dd:nth-of-type(n + 2) {
margin-top: 50px;
}

.cf7__list dt {
width: 35%;
padding-top: 15px;
font-size: 1em;
font-weight: 700
}

.cf7__list dd {
width: 65%;
}

/* 必須・任意 */
.cf7__required,
.cf7__optional {
margin-left: 15px;
padding: 3px 10px;
color: #fff;
font-size: 10px;
vertical-align: 1px;
font-weight:600
}
.cf7__required {
background: var(--themecolor);
}

/* input・textarea */
.cf7__list dd input[type="text"],
.cf7__list dd input[type="tel"],
.cf7__list dd input[type="email"],
.cf7__list dd textarea {
width: 100%;
padding: 20px;
background: #fff;
box-sizing: border-box;
border: 1px solid #fff;
outline: none;
font-size: 100%;
}

.cf7__list dd textarea {
font-size: 100%;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

.cf7__list dd input[type="text"]:focus,
.cf7__list dd input[type="tel"]:focus,
.cf7__list dd input[type="email"]:focus,
.cf7__list dd textarea:focus,
.cf7__list dd select:focus{
background: #fff;
border: 1px solid var(--maincolor);
outline: 0;
}

/* select枠 */
.wpcf7 select {
width: 50%;
max-width: 50%;
	padding: 20px;
	border: 0;
}


/* チェックボックス・ラジオボタン */
.cf7__list dd .wpcf7-checkbox,
.cf7__list dd .wpcf7-radio {
display: block;
padding: 15px 0 10px;
}

/* 縦並び（チェックボックス・ラジオボタン） */
.cf7__list dd .wpcf7-list-item {
display: block;
margin: 0;
}

.cf7__list dd .wpcf7-list-item:nth-child(n + 2) {
margin-top: 18px;
}

/* マウスカーソル（チェックボックス・ラジオボタン） */
.cf7__list dd .wpcf7-list-item label {
cursor: pointer;
}

/* チェックボックス・ラジオボタン */
input[type="checkbox"],
input[type="radio"] {
position: relative;
width: 18px;
height: 18px;
margin-right: 8px;
border: 1px solid #bcbcbc;
vertical-align: -3px;
cursor: pointer;
-webkit-appearance: none;
 -moz-appearance: none;
appearance: none;
}

/* チェックボックス */
input[type="checkbox"]:checked {
border: 1px solid #000;
background: #000;
}

input[type="checkbox"]:checked:before {
position: absolute;
top: 2px;
left: 5px;
transform: rotate(50deg);
width: 6px;
height: 10px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
content: '';
}

/* ラジオボタン */
input[type="radio"] {
border-radius: 50%;
}

input[type="radio"]:checked:before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 9px;
height: 9px;
border-radius: 50%;
background: #000;
content: '';
}

/* プレースホルダー */
/* Google Chrome / Safari / Mozilla Firefox / Opera */
.cf7__list dd input[type="text"]::placeholder,
.cf7__list dd input[type="tel"]::placeholder,
.cf7__list dd input[type="email"]::placeholder,
.cf7__list dd textarea::placeholder {
color: #a5a5a5;
}

/* Microsoft Edge */
.cf7__list dd input[type="text"]::-ms-input-placeholder,
.cf7__list dd input[type="tel"]::-ms-input-placeholder,
.cf7__list dd input[type="email"]::-ms-input-placeholder,
.cf7__list dd textarea::-ms-input-placeholder {
color: #a5a5a5;
}

/* Internet Explorer */
.cf7__list dd input[type="text"]:-ms-input-placeholder,
.cf7__list dd input[type="tel"]:-ms-input-placeholder,
.cf7__list dd input[type="email"]:-ms-input-placeholder,
.cf7__list dd textarea:-ms-input-placeholder {
color: #a5a5a5;
}

/* 送信ボタン */
.cf7__button {
width: 40%;
margin: 0;
text-align: center;
}

.cf7__button input[type="submit"] {
width: 100%;
height: 60px;
background: #000;
color: #fff;
transition: opacity .6s;
outline: none;
font-weight: 700;
font-size: 18px;
}

.cf7__button input[type="submit"]:hover {
opacity: .6;
background-color:#ffffff;
border: 2px solid #000;
color:#000;
}

/* ajax-loader */
.wpcf7-spinner {
vertical-align: middle;
}
.wpcf7-spinner {
display: none!important;
}
@media screen and (max-width: 767px) {

.cf7__list dt {
width: 100%;
margin-bottom: 15px;
padding-top: 0;
}

.cf7__list dd {
width: 100%;
}

.cf7__list dd:nth-of-type(n + 2) {
margin-top: 0;
}

.cf7__list dd .wpcf7-checkbox,
.cf7__list dd .wpcf7-radio {
padding: 15px 0 0;
}

/* 送信ボタン */
.cf7__button input[type="submit"] {
width: 200px;
height: 56px;
font-size: 100%;
}
}

/*pagination
---------------------------------------------------------------------------*/
.pagination {
clear: both;
padding: 20px 0;
position: relative;
font-size: 12px;
line-height: 12px;
text-align: center;
margin-bottom:3%
}
.pagination-box {
display: inline-block;
}
.pagination span, .pagination a {
display: block;
float: left;
margin: 2px 2px 2px 0;
padding: 8px 10px 8px 10px;
text-decoration: none;
width: auto;
color: #fff;
background: #c5c5c5;
}
.pagination a:hover {
color: #fff;
background: #848484;
}
.pagination .current {
padding: 8px 10px 8px 10px;
background: var(--maincolor);
color: #fff;
}
.page_box {
float: left;
width: 100%;
margin-top:20px
}

@media screen and (min-width: 768px) {
.pagination {
font-size: 14px;
line-height: 14px;
}
.pagination span, .pagination a {
padding: 10px 15px 10px 15px;
}
.pagination .current {
padding: 10px 15px 10px 15px;
}}

/* editボタン
---------------------------------------------------- */
.postmetadata,
.edit-link {
width: 100%;
margin: 10px 0;
}
a.post-edit-link {
display: inline-block;
padding: 0.4em 1.6em;
font-size: 0.8em;
color: #fff;
background: #999;
text-decoration: none;
transition: opacity .2s ease;
	border-radius: 3px;
}
a.post-edit-link:hover {
opacity: .6;
}


/*ギャラリー
---------------------------------------------------------------------------*/
.gallery {
display: flex;
flex-wrap: wrap;
gap: 2%;
margin-bottom: 20px;
}
.gallery br {
display: none;
}
.gallery-item {
margin: 0;
}
.gallery-icon {
text-align: center;
}
.gallery-icon img {
width: 100%;
height: auto;
display: block;
}
/* キャプション */
.gallery-caption,
.wp-caption-text {
color: #222;
font-size: 14px;
text-align: center;
margin-top: 5px;
}
/* カラム */
.gallery-columns-1 .gallery-item { width:100%; }
.gallery-columns-2 .gallery-item { width:49%; }
.gallery-columns-3 .gallery-item { width:32%; }
.gallery-columns-4 .gallery-item { width:23.5%; }
.gallery-columns-5 .gallery-item { width:18.4%; }
.gallery-columns-6 .gallery-item { width:15%; }
.gallery-columns-7 .gallery-item { width:12.5%; }

/* SP */
@media (max-width:767px) {
.gallery-columns-3 .gallery-item,
.gallery-columns-4 .gallery-item {
width:49%;
}
.gallery-columns-5 .gallery-item,
.gallery-columns-6 .gallery-item {
width:32%;
}
.gallery-columns-7 .gallery-item {
width:18.4%;
}
}


/*キャプション
---------------------------------------------------------------------------*/
figure {
background: #fff;
padding: 5px;
margin: 1.5em 0;
}
figure img {
width: 100%;
height: auto;
display: block;
}
/* キャプション */
figcaption {
font-size: 0.9em;
text-align: center;
margin-top: 5px;
}
/* SP */
@media (max-width:60em) {
figure {
text-align: center;
margin: 0 auto;
}
figure .alignright img,
figure .alignleft img {
float: none;
}
}


/*arvhive
/* ------------------------------------- */
.info_box a{
text-decoration:none;
}
.i_date{
margin: 0 10px 0 0;
font-size: 85%;
min-width: 100px;
}
.i_text{
margin: 0;
text-decoration: none;
font-size: 100%;
line-height: 150%;
padding:5px 0;
width: 100%;
}
.i_title{
font-size: 1.6em;
line-height: 1.7;
margin: 10px 0 30px 0;
padding: 5px 0 5px 0;
}
.i_text_box{
margin: 0 0 30px 0;
padding: 0 0 30px 0;
}
.i_text_box:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.i_date2{
font-size: 80%;
line-height: 2;
}
.i_date2 span{
margin-right: 10px
}
/* カテゴリタグ */
.info_meta_page span.cat_info{
display:inline-block;
padding:1px 10px;
font-size:75%;
background:var(--maincolor);
color:#fff;
width: 80px;
text-align: center
}
@media screen and (min-width:981px) {
.i_title{
font-size: 1.8em;
line-height: 1.9;
}
.i_date2{
font-size:100%;
}
}


/* 次へ　戻る　前へ
---------------------------------------------------- */
.kiji_link{
display: flex;
align-items: flex-end;
height: 150px;
width: 350px;
margin: 0 auto
}
.kiji_link>div{
width: calc(100% / 3);
text-align: center;
vertical-align: middle;
}
.kiji_link a{
text-decoration: none;
color: var(--maincolor);
font-size: 1em;
}
.kiji_link a:hover{
opacity: 0.6;
transition: 0.5s;
}


/* back edit
---------------------------------------------------- */
.i_back{
max-width: 100%;
font-size:80%;
margin:10px 0;
}
.i_back a {
text-decoration: none;
}
.i_back a:visited {
text-decoration: underline;
}
.i_back a:hover {
text-decoration: underline;
}
.edit{
width:100%;
font-size:80%;
clear:both;
}


/* ボタン　お知らせ一覧に戻る　single
---------------------------------------------------- */
.back_btn {
margin: 5% 0;
padding: 0;
width:100%;
box-sizing:border-box;
}
.back_btn_box {
margin: 20px auto 0 auto;
padding: 0;
width:100%;
box-sizing:border-box;
}
.back_btn a,
.back_btn_box a{
margin:0 auto;
}
.back_btn a:after,
.back_btn_box a:after{
content: "";
clear: both;
display: block;
}
@media screen and (min-width:768px) {
.back_btn a{
width:250px;
}
.back_btn_box a{
width:300px;
}
}

/*リスト
---------------------------------------------------------------------------*/
/* 丸*/
.list-1 {
list-style: disc;
padding-left: 1.2em;
}
.list-1 li {
padding: 0 .3em .3em 0;
}
.list-1 li::marker {
font-size: 1.1em;
}
/* 数字 */
.list-2 {
padding-left: 1.8em;
}
.list-2 li {
margin-bottom: .5em;
}
.list-2 li::marker {
font-weight: 700;
}

/*リスト 地図地名
---------------------------------------------------------------------------*/
.map-wrap {
display: flex;
gap: 20px;
justify-content: center; /* 中央寄せ */
margin: 50px 0
}
a.map-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 50px;
border: 1px solid var(--maincolor);
border-radius: 50px; /* 楕円 */
color: var(--maincolor);
font-size: 18px;
text-decoration: none;
background: #fff;
transition: 0.3s;
}
/* ホバー */
a.map-btn:hover {
background: var(--maincolor);
color: #fff;
}
@media screen and (max-width: 767px) {
.map-wrap {
gap: 5px;
margin: 30px 0
}
a.map-btn {
font-size: 14px;
height: 30px;
}
}

/*カテゴリー　月別アーカイブ
---------------------------------------------------------------------------*/
.selectbox-info {
display: inline-flex;
align-items: center;
position: relative;
margin: 10px 0
}

.selectbox-info::after {
position: absolute;
right: 15px;
width: 10px;
height: 7px;
background-color: var(--maincolor);
clip-path: polygon(0 0, 100% 0, 50% 100%);
content: '';
pointer-events: none;
}

.selectbox-info select {
appearance: none;
min-width: 230px;
height: 2.8em;
padding: .4em calc(.8em + 30px) .4em .8em;
border: 1px solid var(--maincolor);
background-color: #fff;
color: var(--maincolor);
font-size: 1em;
cursor: pointer;
}

/* ---------------------------------------------------------------------------------------------

　 お酒が出来るまで

--------------------------------------------------------------------------------------------- */
.border-box01 {
padding: 2em;
margin: 1em 0;
border: 1px solid var(--maincolor);
background: #fff
}
.border-box01 img {
width: 100%;
height: auto;
display: block;
margin-bottom: 20px;
}
.text-area b {
display: block;
color: var(--maincolor);
font-size: 22px;
margin-bottom: 10px;
font-weight: 700;
}
.text-area p {
margin: 0;
line-height: 1.7;
}
/* 三角 */
.triangle {
width: 0;
height: 0;
border-style: solid;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
border-top: 20px solid var(--maincolor);
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.border-box01 {
display: flex;
align-items: center; /* 縦中央 */
gap: 30px;
}
.border-box01 img {
width: 30%;
margin: 0;
flex-shrink: 0;
}
.text-area {
width: 70%;
}
.text-area b {
font-size: 26px;
}
}

/*ひし形
---------------------------------------------------------------------------*/
.step_item {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}

.rhombus {
width: 50px;
aspect-ratio: 1;
background: #008dbd;
clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 20px;
font-weight: bold;
}

.step_title {
font-size: 20px;
margin: 0;
}

@media screen and (min-width: 768px) {
.step_item .text_area {
flex: 1;
}
.step_title {
font-size: 24px;
}
}
@media screen and (max-width: 767px) {
.step_item .text_area {
margin-top: 20px
}
}