@charset "UTF-8";
/* --------------------------------------------------------------------------------------------- */
/*	 全体の設定
/* --------------------------------------------------------------------------------------------- */
.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;
}
/* --------------------------------------------------------------------------------------------- */
/*	 タイトル
/* --------------------------------------------------------------------------------------------- */
#title {
	box-sizing: border-box;
	width: 100%;
	padding: 120px 8% 50px 8%;
	background: url("../img/page/back.jpg") no-repeat center 40px;
	background-size: 100%;
	position: relative; /* 基準位置 */
	
	/* ▼【重要】下にはみ出させるため、overflow: hiddenを削除、またはvisibleに設定 */
	overflow: visible; 
}

#title h2 {
	font-size: 150%;
	letter-spacing: 1px;
	font-weight: normal;
	color: #FFF;
	display: inline-block;
	position: relative;
	z-index: 2; /* 文字を画像より手前に */
}

/* 右側・下にはみ出す画像の指定 */
#title .title-bg-img {
	position: absolute;
	right: 0;           /* 右端に配置 */
	
	/* ▼【重要】下にはみ出させる設定 */
	bottom: -20px;      /* 【調整】負の値（マイナス）を指定して下にはみ出させる */
	width: 50%; 
	height: auto;
	z-index: 1;         /* h2の背後、#titleの背景よりは手前 */
	pointer-events: none;
}

/* --- 既存のメディアクエリ内での調整 --- */

@media screen and (min-width: 768px) {
#title {
	padding: 190px 8% 70px 8%;
	background: url("../img/page/back.jpg") no-repeat center 0px;
	background-size: 100%;
}
#title h2 {
	font-size: 180%;
}
#title .title-bg-img {
	width: 50%;
	bottom: -30px;     /* 【調整】タブレットサイズでの踏み出し具合 */
}
}

@media screen and (min-width: 1024px) {
  #title {
    padding: 250px 0 100px 0;
    background: url("../img/page/back.jpg") no-repeat center 0px;
    background-size: 100%;
    position: relative; /* 子要素の基準点 */
    overflow: visible;  /* 下へのはみ出しを許可 */
  }

  /* 幅1024pxで画面中央に配置するコンテナ */
  #title .title-inner {
    width: 1024px;
    margin: 0 auto;     /* 画面中央に配置 */
    position: relative;
    z-index: 2;         /* 画像より手前に表示 */
	}

  #title h2 {
    font-size: 250%;
    margin: 0;          /* 余計なマージンをリセット */
    display: block;     /* コンテナいっぱいに広げる */
  }

  /* 右側にはみ出す画像の設定 */
  #title .title-bg-img {
    position: absolute;
    right: 0;           /* 画面の右端に固定（1024pxの枠内に寄せる場合は right: calc((100% - 1024px) / 2) に変更） */
    bottom: -50px;
    width: 60%;
    height: 250px;
    object-fit: cover;
    object-position: center;
    z-index: 1;         /* インナーコンテナの背後 */
    pointer-events: none;
  }
}
@media screen and (min-width: 1200px) {
#title {
    padding: 250px 0 100px 0;
    background: url("../img/page/back.jpg") no-repeat center -150px;
    background-size: 100%;
  }
#title .title-inner {
    width: 1200px;
	}
  #title .title-bg-img {
    height: 300px;
  }
}
/* --------------------------------------------------------------------------------------------- */
/*	 テキストなど
/* --------------------------------------------------------------------------------------------- */
.tex,
.tex0 {
clear: both;
padding: 10% 0px;
line-height:1.8;
font-size:95%;
text-align: justify;
}
.tex img {
	border: 0;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.tex a {
	text-decoration: underline;
	color: #09F;
	-webkit-filter: opacity(100%);
	filter: opacity(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.tex a:hover {
	text-decoration: underline;
	-webkit-filter: opacity(50%);
	filter: opacity(50%);
}
.tex img a {
	border: 0;
	-webkit-filter: opacity(100%);
	filter: opacity(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	text-decoration: none !important;
}
.tex a:hover img {
  text-decoration: none !important;
	-webkit-filter: opacity(50%);
	filter: opacity(50%);
}
.tex0 h5 {
	border-bottom: #000 1px solid;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 5px 0px;
	color:#960;
	font-size:140%;
	font-weight:normal;
	text-align: center;
}
.tex0 h6 {
	margin: 0px 0px 10px 0px;
	padding: 10px;
	color: #630;
	font-size:140%;
	font-weight:normal;
}

img.aligncenter,
img.alignright,
img.alignleft,
img.alignnone {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4%;
clear:both;
}
.alignright {
  float: none;
}
.alignleft {
  float: none;
}

.left,
.right {
	margin: 0px;
}
.no,
.no_sp {
	display: none;
}
.edit {
	width:100%;
	font-size:80%;
}
.mb {
	margin-bottom: 15px;
}

.m {
	margin: 0px 0px 20px 0px;
	width: 100%;
	background: linear-gradient(to right, var(--sub01),var(--sub02));
	border-radius: 10px;
}
.m h4,
.m0 h4 {
	font-size:140%;
	line-height:1.4em;
	font-weight: normal;
	padding: 15px 20px;
	color: #FFF;
}
.m2 {
	margin: 0px 0px 20px 0px;
	width: 100%;
	border-bottom: 1px var(--sub01) solid;
	border-left: 1px var(--sub01) solid;
	box-sizing: border-box;
}
.m2 h5 {
	font-size:130%;
	line-height:1.4em;
	font-weight: normal;
	padding: 10px 0px 10px 20px;
	color:var(--sub01);
}
.m3 {
	margin: 0px 0px 20px 0px;
	width: 100%;
	border-bottom: 1px var(--sub02) solid;
}
.m3 h5 {
	font-size:110%;
	line-height:1.4em;
	font-weight: normal;
	padding: 10px 0px 10px 0px;
	color:var(--sub02);
}
.m4 {
	font-size: 120%;
	margin: 0 0 10px 0;
	display:inline-block;
}
hr {
	border-width: 1px 0px 0px 0px; /* 太さ */
	border-style: dotted; /* 線種 */
	border-color: var(--sub02); /* 線色 */
	height: 1px; /* 高さ */
    max-width: 100%;
clear:both;
margin: 8% 0px;
}

table {
	border-collapse: collapse;
	margin: 5px 0px 0px 0px;
	text-align: left;
line-height:1.5em;
word-break: break-all;
}
table tr {
	border-top: var(--sub02) solid 1px;
}
table td {
	font-size: 90%;
	line-height: 170%;
	padding: 10px;
	border-bottom: 1px solid var(--sub02);
}
.sf_t {
	font-size: 80%;
}

@media screen and (min-width: 768px) {
.tex,
.info,
.tex0  {
padding: 60px 0px;
}
.tex2 {
padding: 60px 0px;
}
hr {
margin: 30px 0px 30px 0px;
}
.left {
	width:49%;
	float: left;
}
.right {
	width:49%;
	float: right;
}
.no_sp {
	display: block;
}
.no_s {
	display: none;
}
.m h4,
.m0 h4 {
	font-size:170%;
}
.m2 h5 {
	font-size:150%;
}
.m3 h5 {
	font-size:130%;
}	

img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
clear:none;
}
img.alignright {
    margin-left: 20px;
    margin-right: 0;
    margin-bottom: 20px;
    display: inline;
clear:none;
}
img.alignleft {
    margin-left: 0;
    margin-right: 20px;
    margin-bottom: 20px;
    display: inline;
clear:none;
}
img.alignnone {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 20px;
clear:none;
}
.alignright {
  float: right;
}
.alignleft {
  float: left;
}	
}
@media screen and (min-width: 1024px) {
table td {
	font-size: 100%;
	line-height: 170%;
	padding: 15px 20px;
}
.tex,
.info {
padding: 80px 0px;
width: 1024px;
margin: auto;
}
.tex2 {
padding: 80px 0px;
width: 1024px;
margin: auto;
}
.no {
	display: block;
}
.no_p {
	display: none;
}
}
@media screen and (min-width: 1200px) {
.tex,
.info {
padding: 100px 0px;
width: 1200px;
margin: auto;
}
.tex2 {
padding: 100px 0px;
width: 1200px;
margin: auto;
}
}

/* --------------------------------------------------------------------------------------------- */
/*	 アーカイブ
/* --------------------------------------------------------------------------------------------- */
.info_box {
	border-bottom: #000 dotted 1px;
	margin: 0px 0px 15px 0px;
	padding: 0px 0px 15px 0px;
	width: 100%;
}
.info_box2{
	border-bottom: #666 dotted 1px;
	margin: 0px 0px 15px 0px;
	padding: 0px 0px 15px 0px;
	width: 100%;
}
.i_box{
	float:left;
width: 75%;
}
.i_date{
	color: #444;
	margin: 0px 10px 0px 0px;
}
.i_text {
	margin: 0px 0px 0px 0px;
	font-weight: bold;
}
.i_m{
	color: #666;
	margin: 0px 10px 0px 0px;
	clear:both;
}
.i_text span {
	color: #333;
	font-weight: normal;
	font-size:80%;
}

.i_text a {
	color: #000;
	text-decoration: underline;
	font-weight: normal;
}
.i_text a:hover {
	color: #666;
	text-decoration: underline;
}
.i_date2{
	color: #666;
}
.i_title{
	color: #000;
	font-size: 150%;
	line-height: 170%;
	margin: 0px 0px 10px 0px;
	font-weight: normal;

}
.i_title a {
	color: #000;
	text-decoration: none;
	-webkit-filter: opacity(100%);
	filter: opacity(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.i_title a:hover {
	-webkit-filter: opacity(50%);
	filter: opacity(50%);
	text-decoration: none;
}
.p_title{
	color: #000;
	font-size: 150%;
	line-height: 170%;
	margin: 0px 0px 10px 0px;
	font-weight: normal;

}
.i_m2{
	color: #666;
	font-size: 110%;
	line-height: 170%;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 5px 0px;
	font-weight: normal;
	border-bottom: #000 dotted 1px;
}

.back{
	color: #888;
width: 100%;
	font-size: 90%;
	border-top: #666 dotted 1px;
	margin: 30px 0px 0px 0px;
	padding: 20px 0px 0px 0px;
	clear:both;
}
.back a {
	text-decoration: underline;
	color: #666;
}
.back a:visited {
	color: #666;
	text-decoration: underline;
}
.back a:hover {
	color: #999;
	text-decoration: underline;
}
@media screen and (min-width: 768px) {
.info li {
width: 23.5%;
float:left;
margin: 0 2% 0 0;
}
.info li:nth-of-type(4n) {
width: 23.5%;
margin: 0;
}

}
@media screen and (min-width: 1024px) {
.info_box {
	margin: 0px 0px 15px 0px;
	padding: 0px 0px 15px 0px;
}
.back{
width: 1024px;
}
.i_date,
.i_text{
	float: left;
}
.info_box img {
width: 70px;
height: 70px;
float: left;
padding: 1px;
margin: 0px 10px 0px 0px;
}
  }
@media screen and (min-width: 1200px) {
.back{
width: 1200px;
}
  }




/* --------------------------------------------------------------------------------------------- */
/*	 商品紹介
/* --------------------------------------------------------------------------------------------- */
.blog {
    /* グラデーション背景（左から右へ） */
    background: linear-gradient(to right, #FFD0E7, #FFDA8C) !important;

    /* 画面両端まで背景を広げる処理 */
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    /* 中のコンテンツを元のコンテナ幅に収めて中央寄せ */
    padding-left: calc(50vw - 50%) !important;
    padding-right: calc(50vw - 50%) !important;
    
    /* 上下の余白（デザインに合わせて調整してください） */
    padding-top: 60px;
    padding-bottom: 60px;

    box-sizing: border-box;
}
.blog_t {
	width:90px;
margin: 0 auto 10px auto;
}
.blog_t img {
	width:100%;
}
.blog a img,
.blog a h5,
.blog a p,
.blog a span {
	border: 0;
transition: 0.3s;
}
.blog a:hover img,
.blog a:hover h5,
.blog a:hover p,
.blog a:hover span {
opacity: 0.7;
}
.blog ul {
	list-style:none;
padding: 0px 0px 2% 0px;
display: flex;
  flex-wrap: wrap;
text-align:left;}
.blog_box {
display: inline-block;
vertical-align: top;
height: auto;
width: 48%;
margin: 4% 2% 0px 0px;
text-align:left;
}
.blog_box img {
    width: 100%;
}
.blog_box a {
	color:var(--maincolor);
	text-decoration: none !important;
}
.blog_box a:hover {
color:var(--maincolor) !important;
	text-decoration: none !important;
}
.blog ul li:nth-child(even){
margin: 4% 0px 0px 0px;
}
.img_cover {
	overflow: hidden;
	position: relative;
	width: 100%;
}
.img_cover img {
	width: 100%;
}
.blog_box h5 {
	font-family: 'Noto Serif JP', serif;
	font-weight:500;
	font-size:110%;
	line-height:1.4em;
	color: var(--maincolor);
	padding: 10px 0 0px 0;
}
.blog_box p {
	padding: 5px 0 0px 0;
	line-height: 1.6;
	font-size: 90%;
}
.blog_box span {
	font-family: 'Noto Serif JP', serif;
	font-weight:500;
	color:#900;
	line-height: 1.6;
	padding: 5px 0 0px 0  !important;
}


@media screen and (min-width: 768px) {

.blog_t {
	width:112px;
}
.blog_box {
float:left;
width: 24%;
margin: 2% 1.333% 0px 0px;
}
.blog_box img {
    width: 100%;
}
.blog ul li:nth-child(even){
margin: 2% 1.333% 0px 0px;
}
.blog ul li:nth-child(4n){
margin: 2% 0px 0px 0px;
}
}


/* --------------------------------------------------------------------------------------------- */
/*	 レイアウト
/* --------------------------------------------------------------------------------------------- */
.container,
.tex,
.clearfix {
    overflow: visible !important;
}
.full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw); /* 親要素を無視して画面左端に合わせる計算式 */
}

.full-bleed img {
    width: 100%;    /* divの幅（100vw）に合わせる */
    height: auto;
    display: block;
}
/* 横並びの親要素 */
.flex-container {
    display: flex;
    align-items: center; /* 上下中央揃え */
    justify-content: space-between;
}

.image-side img {
    width: 100%;
    height: auto;
    display: block;
}
.flex-container {
        flex-direction: column;
    }
.image-side {
        width: 100vw;
        margin: 0;
        padding: 20px 0 0 0;
}
.flex-container.reverse-layout {
        /* column（縦並び）の順番を reverse（逆）にする */
        display: flex;
        flex-direction: column-reverse; 
    }
.flex-container.reverse-layout .text-side {
        width: 100%;
        margin-bottom: 20px; /* テキストが上に来るので、下に余白を作る */
        margin-top: 0;
    }
.flex-container.reverse-layout .image-side {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

.text-side {
width: 100% !important;
        text-align: left;
}

.con_box {
	background: var(--themecolor);
	padding: 3%;
	width: 100%;
	box-sizing: border-box;
}
@media screen and (min-width: 1024px) {
    .flex-container, 
    .flex-container.reverse-layout {
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
    }

    /* 【通常：右画像】 */
    .flex-container .text-side {
        width: 50% !important;
        padding: 0 !important;
    }
    .flex-container .image-side {
        width: calc(50% + (100vw - 100%) / 2) !important;
        max-width: none !important; /* 幅制限の解除 */
        flex-shrink: 0 !important; /* 縮小の防止 */
        margin-right: calc((100% - 100vw) / 2) !important;
        margin-left: 0 !important;
    }

    /* 【逆：左画像】画面左端へはみ出させる設定 */
    .flex-container.reverse-layout .image-side {
        width: calc(45% + (100vw - 100%) / 2) !important; /* 画像側の領域幅 */
        max-width: none !important; /* 親要素による幅制限を解除 */
        flex-shrink: 0 !important; /* Flexboxによる強制縮小を防止 */
        margin-left: calc((100% - 100vw) / 2) !important; /* 左端まで突き抜けさせる計算式 */
        margin-right: 0 !important;
    }
    .flex-container.reverse-layout .text-side {
        width: 50% !important; /* テキスト側の幅 */
        padding-left: 40px !important; /* 画像とテキストの間の余白 */
        padding-right: 0 !important;
        margin-bottom: 0;
    }
}

@media screen and (min-width: 1200px) {
    .flex-container .text-side {
        width: 45% !important;
        padding: 0 !important;
    }
    .flex-container .image-side {
        width: calc(55% + (100vw - 100%) / 2) !important;
        margin-right: calc((100% - 100vw) / 2) !important;
        margin-left: 0 !important;
    }

    /* 1200px以上の【逆：左画像】調整 */
    .flex-container.reverse-layout .image-side {
        width: calc(50% + (100vw - 100%) / 2) !important;
    }
    .flex-container.reverse-layout .text-side {
        width: 45% !important;
    }
}
/* --------------------------------------------------------------------------------------------- */
/*	 ボタン
/* --------------------------------------------------------------------------------------------- */
button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
button.learn-more {
  display: block; 
  margin: 20px 0 0 0; 
  width: 9rem;
  height: auto;
}

.circle2 {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--maincolor);
  border-radius: 1.625rem;
}
.circle2 .icon_b2 {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #FFF;
}
.circle2 .icon_b2.arrow2 {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 0rem;
  height: 0.125rem;
  background: none;
}
.circle2 .icon_b2.arrow2::before {
  position: absolute;
  content: "";
  top: -0.3rem;
  right: -0.8rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #FFF;
  border-right: 0.125rem solid #FFF;
  transform: rotate(45deg);
}
.button-text2 {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.4rem 0;
  margin: 0 0 0 10px;
  color: var(--maincolor);
  font-weight: 300;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}
button:hover .circle2 {
  width: 100%;
}
button:hover .circle2 .icon_b2.arrow2 {
  background: #FFF;
  transform: translate(.5rem, 0);
}
button:hover .button-text2 {
  color: #FFF;
}