@charset "utf-8";
/* --------------------------------------------------
スタイルリセット、基本CSS定義
-----------------------------------------------------
	index
	0 - Reset
	1 - Base font
	2 - font style
	3 - text color
	4 - clearfix
	5 - float
	6 - preset width
	5 - preset margin
	6 - inline align
	7 - block align
	8 - tools
	9 - JavaScript Class
-------------------------------------------------- */

/* ---------------------------------------------
	0 - Reset
--------------------------------------------- */
html {
  overflow-y: scroll;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

input,
textarea {
  margin: 0;
  font-size: 100%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset,
img {
  border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
th,
var {
  font-style: normal;
  font-weight: normal;
}

ol,
ul {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before,
q:after {
  content: "";
}

abbr,
acronym {
  border: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

/* ---------------------------------------------
	1 - Base font
--------------------------------------------- */
body {
  color: #333;
  text-align: center;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 14px;
  line-height: 170%;
}

/* ie7 */
*:first-child+html body {
  font-size: 75%;
}

/* ie5 - ie6 */
* html body {
  font-size: 75%;
}

/* ---------------------------------------------
	2 - font style
--------------------------------------------- */
.fNormal {
  font-weight: normal;
}

.fBold {
  font-weight: bold;
}

.fItalic {
  font-style: italic;
}

.fSSS {
  font-size: 70%;
}

.fSS {
  font-size: 78%;
}

/* base 12px =  8px */
.fS {
  font-size: 85%;
}

/* base 12px = 10px */
.fM {
  font-size: 100%;
}

.fL {
  font-size: 115%;
}

/* base 12px = 14px */
.fLL {
  font-size: 130%;
}

/* base 12px = 16px */
.fLLL {
  font-size: 143%;
}

/* base 12px = 18px */
.fLLLL {
  font-size: 200%;
}

sup {
  font-size: 78%;
  vertical-align: top;
}

sub {
  font-size: 78%;
  vertical-align: baseline;
}

/* ---------------------------------------------
	3 - text color
--------------------------------------------- */
.txtColor1 {
  color: #1d2088;
}

.txtColor2 {
  color: #ed2496;
}

.txtColor3 {
  color: #fd0000;
}

.txtColor4 {}

.txtColor5 {}

.fRed {
  color: #cc0000;
}

.fGray {
  color: #999999;
}

a {
  color: #ff86a0;
  text-decoration: none;
  outline: none;
}

a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------
	preset margin 
--------------------------------------------- */
.mt00 {
  margin-top: 0 !important;
}

.mt05 {
  margin-top: 5px;
}

.mt10 {
  margin-top: 10px;
}

.mt12 {
  margin-top: 12px;
}

.mt15 {
  margin-top: 15px;
}

.mt20 {
  margin-top: 20px;
}

.mt25 {
  margin-top: 25px;
}

.mt30 {
  margin-top: 30px;
}

.mt35 {
  margin-top: 35px;
}

.mt40 {
  margin-top: 40px;
}

.mt45 {
  margin-top: 45px;
}

.mt50 {
  margin-top: 50px;
}

.mr00 {
  margin-right: 0px !important;
}

.mr05 {
  margin-right: 5px !important;
}

.mr10 {
  margin-right: 10px !important;
}

.mr12 {
  margin-right: 12px !important;
}

.mr15 {
  margin-right: 15px !important;
}

.mr20 {
  margin-right: 20px !important;
}

.mr25 {
  margin-right: 25px !important;
}

.mr30 {
  margin-right: 30px !important;
}

.mr35 {
  margin-right: 35px !important;
}

.mr40 {
  margin-right: 40px !important;
}

.mr45 {
  margin-right: 45px !important;
}

.mr50 {
  margin-right: 50px !important;
}

.mb00 {
  margin-bottom: 0 !important;
}

.mb05 {
  margin-bottom: 5px;
  background-repeat: no-repeat;
}

.mb10 {
  margin-bottom: 10px;
}

.mb12 {
  margin-bottom: 12px;
}

.mb15 {
  margin-bottom: 15px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb25 {
  margin-bottom: 25px;
}

.mb30 {
  margin-bottom: 30px;
}

.mb35 {
  margin-bottom: 35px;
}

.mb40 {
  margin-bottom: 40px;
}

.mb45 {
  margin-bottom: 45px;
}

.mb50 {
  margin-bottom: 50px;
}

.ml00 {
  margin-left: 0 !important;
}

.ml05 {
  margin-left: 5px;
}

.ml10 {
  margin-left: 10px;
}

.ml12 {
  margin-left: 12px;
}

.ml15 {
  margin-left: 15px;
}

.ml20 {
  margin-left: 20px;
}

.ml25 {
  margin-left: 25px;
}

.ml30 {
  margin-left: 30px;
}

.ml30 {
  margin-left: 35px;
}

.ml40 {
  margin-left: 40px;
}

.ml45 {
  margin-left: 45px;
}

.ml50 {
  margin-left: 50px;
}

/* ---------------------------------------------
	preset padding 
--------------------------------------------- */
.pt00 {
  padding-top: 0;
}

.pt05 {
  padding-top: 5px;
}

.pt10 {
  padding-top: 10px;
}

.pt12 {
  padding-top: 12px;
}

.pt15 {
  padding-top: 15px;
}

.pt20 {
  padding-top: 20px;
}

.pt25 {
  padding-top: 25px;
}

.pt30 {
  padding-top: 30px;
}

.pt35 {
  padding-top: 35px;
}

.pt40 {
  padding-top: 40px;
}

.pt45 {
  padding-top: 45px;
}

.pt50 {
  padding-top: 50px;
}

.pr00 {
  padding-right: 0;
}

.pr05 {
  padding-right: 5px;
}

.pr10 {
  padding-right: 10px;
}

.pr12 {
  padding-right: 12px;
}

.pr15 {
  padding-right: 15px;
}

.pr20 {
  padding-right: 20px;
}

.pr25 {
  padding-right: 25px;
}

.pr30 {
  padding-right: 30px;
}

.pr35 {
  padding-right: 35px;
}

.pr40 {
  padding-right: 40px;
}

.pr45 {
  padding-right: 45px;
}

.pr50 {
  padding-right: 50px;
}

.pb00 {
  padding-bottom: 0;
}

.pb05 {
  padding-bottom: 5px;
}

.pb10 {
  padding-bottom: 10px;
}

.pb12 {
  padding-bottom: 12px;
}

.pb15 {
  padding-bottom: 15px;
}

.pb20 {
  padding-bottom: 20px;
}

.pb25 {
  padding-bottom: 25px;
}

.pb30 {
  padding-bottom: 30px;
}

.pb35 {
  padding-bottom: 35px;
}

.pb40 {
  padding-bottom: 40px;
}

.pb45 {
  padding-bottom: 45px;
}

.pb50 {
  padding-bottom: 50px;
}

.pl00 {
  padding-left: 0;
}

.pl05 {
  padding-left: 5px;
}

.pl10 {
  padding-left: 10px;
}

.pl12 {
  padding-left: 12px;
}

.pl15 {
  padding-left: 15px;
}

.pl20 {
  padding-left: 20px;
}

.pl25 {
  padding-left: 25px;
}

.pl30 {
  padding-left: 30px;
}

.pl30 {
  padding-left: 35px;
}

.pl40 {
  padding-left: 40px;
}

.pl45 {
  padding-left: 45px;
}

.pl50 {
  padding-left: 50px;
}

/* ---------------------------------------------
	inline align
--------------------------------------------- */
.inlineL {
  text-align: left;
}

.inlineC {
  text-align: center;
}

.inlineR {
  text-align: right;
}

/* ---------------------------------------------
	vertical align
--------------------------------------------- */
.vlineT {
  vertical-align: top;
}

.vlineM {
  vertical-align: middle;
}

.vlineB {
  vertical-align: bottom;
}

/* ---------------------------------------------
	6 - preset width
--------------------------------------------- */
.wHalf {
  width: 48%;
}

.wTri {
  width: 33%;
}

.wQuart {
  width: 24%;
}

.wFull {
  width: 99.9%;
}

.wMax {
  width: 100%;
}

/* table */
.tw03 {
  width: 3%;
}

.tw05 {
  width: 5%;
}

.tw10 {
  width: 10%;
}

.tw13 {
  width: 13%;
}

.tw15 {
  width: 15%;
}

.tw20 {
  width: 20%;
}

.tw25 {
  width: 25%;
}

.tw30 {
  width: 30%;
}

.tw35 {
  width: 35%;
}

.tw40 {
  width: 40%;
}

.tw45 {
  width: 45%;
}

.tw50 {
  width: 50%;
}

/* ---------------------------------------------
	5 - float
--------------------------------------------- */
.fltL {
  display: inline;
  float: left;
}

.fltR {
  display: inline;
  float: right;
}

.ft {
  overflow: hidden;
  zoom: 1;
}

/* ---------------------------------------------
	imgBox 
--------------------------------------------- */
.imgBoxL,
.imgBoxR {
  display: block;
  min-height: 1%;
}

.imgBoxL:after,
.imgBoxR:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

* html .imgBoxL,
* html .imgBoxR {
  height: 1%;
  /*\*/
  /*/
	height: auto;
	overflow: hidden;
	/**/
}

.imgBoxL .fltImg {
  display: inline;
  float: left;
  margin-right: 10px;
}

.imgBoxR .fltImg {
  display: inline;
  float: right;
  margin-left: 10px;
}

/* ---------------------------------------------
	4 - clearfix
--------------------------------------------- */
.clearfix {
  display: block;
  min-height: 1%;
}

.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

* html .clearfix {
  height: 1%;
  /*\*/
  /*/
	height: auto;
	overflow: hidden;
	/**/
}

/* ---------------------------------------------
	block align
--------------------------------------------- */
.blockC {
  text-align: center;
}

.blockC .block {
  margin-right: auto;
  margin-left: auto;
  text-align: left;
}

/* ie 6 Fix */
* html .blockC .block {
  margin-right: 0;
  margin-left: 0;
}

.blockR {
  text-align: right;
}

.blockR .block {
  margin-left: auto;
  text-align: left;
}

/* ie 6 Fix */
* html .blockR .block {
  margin-left: 0;
}

/* ---------------------------------------------
	tools
--------------------------------------------- */
.clear {
  clear: both;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.hide {
  display: none;
}

.nobg {
  background: none;
}

.underLine {
  text-decoration: underline;
}

.noLine {
  text-decoration: none;
}

/* ---------------------------------------------
	コーディングマーカー
--------------------------------------------- */
.edsmark {
  border: 2px solid #9966cc;
  padding: 10px;
  text-align: center;
  background-color: #ff99ff;
  color: #fff;
}

/* ---------------------------------------------
	レスポンシブ用　表示設定
--------------------------------------------- */
.w100 {
  width: 100%;
}

.w90 {
  width: 90%;
}

.w80 {
  width: 80%;
}

.w70 {
  width: 70%;
}

.w60 {
  width: 60%;
}

.w50 {
  width: 50%;
}

.w40 {
  width: 40%;
}

.w30 {
  width: 30%;
}

.w20 {
  width: 20%;
}

.w10 {
  width: 10%;
}

@media screen and (max-width: 768px) {
  .tw100 {
    width: 100%;
    margin: 0 auto;
    display: block;
  }

  .tw90 {
    width: 90%;
    margin: 0 auto;
    display: block;
  }

  .tw80 {
    width: 80%;
    margin: 0 auto;
    display: block;
  }

  .tw70 {
    width: 70%;
    margin: 0 auto;
    display: block;
  }

  .tw60 {
    width: 60%;
    margin: 0 auto;
    display: block;
  }

  .tw50 {
    width: 50%;
    margin: 0 auto;
    display: block;
  }

  .tw40 {
    width: 40%;
    margin: 0 auto;
    display: block;
  }

  .tw30 {
    width: 30%;
    margin: 0 auto;
    display: block;
  }

  .tw20 {
    width: 20%;
    margin: 0 auto;
    display: block;
  }

  .tw10 {
    width: 10%;
    margin: 0 auto;
    display: block;
  }
}

/*max-width: 768px*/

@media screen and (max-width: 480px) {
  .sw100 {
    width: 100%;
    margin: 0 auto;
    display: block;
  }

  .sw90 {
    width: 90%;
    margin: 0 auto;
    display: block;
  }

  .sw80 {
    width: 80%;
    margin: 0 auto;
    display: block;
  }

  .sw70 {
    width: 70%;
    margin: 0 auto;
    display: block;
  }

  .sw60 {
    width: 60%;
    margin: 0 auto;
    display: block;
  }

  .sw50 {
    width: 50%;
    margin: 0 auto;
    display: block;
  }

  .sw40 {
    width: 40%;
    margin: 0 auto;
    display: block;
  }

  .sw30 {
    width: 30%;
    margin: 0 auto;
    display: block;
  }

  .sw20 {
    width: 20%;
    margin: 0 auto;
    display: block;
  }

  .sw10 {
    width: 10%;
    margin: 0 auto;
    display: block;
  }
}

/*max-width: 480px*/

/* ---------------------------------------------
	ページトップ
--------------------------------------------- */

#pagetop {
  position: fixed;
  right: 0px;
  bottom: 0px;
}

/* ---------------------------------------------
	レスポンシブ用　基本ページ分割設定
--------------------------------------------- */

.block1 {
  margin: 0 1%;
}

.block2 {
  margin: 0 2%;
}

.block3 {
  margin: 0 3%;
}

.block4 {
  margin: 0 4%;
}

.block5 {
  margin: 0 5%;
}

.block6 {
  margin: 0 6%;
}

.block7 {
  margin: 0 7%;
}

.block8 {
  margin: 0 8%;
}

/*@media screen and (max-width: 480px){
	.block8,.block7,.block6,.block5,.block4,.block3,.block2,.block1{margin:0px;}
}*/
/*max-width: 480px*/

.pc_none {
  display: none;
}

/*PCで非表示*/
/*左*/
.pc1L {
  width: 8.33%;
  float: left;
}

.pc2L {
  width: 16.66%;
  float: left;
}

.pc3L {
  width: 24.99%;
  float: left;
}

/*均等4分割*/
.pc4L {
  width: 33.33%;
  float: left;
}

/*均等3分割*/
.pc5L {
  width: 41.66%;
  float: left;
}

.pck5L {
  width: 20%;
  float: left;
}

/*均等5分割*/
.pc6L {
  width: 50%;
  float: left;
}

/*均等2分割*/
.pc7L {
  width: 58.33%;
  float: left;
}

.pc8L {
  width: 66.66%;
  float: left;
}

.pc9L {
  width: 74.99%;
  float: left;
}

.pc10L {
  width: 83.33%;
  float: left;
}

.pc11L {
  width: 91.66%;
  float: left;
}

/*右*/
.pc1R {
  width: 8.33%;
  float: right;
}

.pc2R {
  width: 16.66%;
  float: right;
}

.pc3R {
  width: 24.99%;
  float: right;
}

/*均等4分割*/
.pc4R {
  width: 33.33%;
  float: right;
}

/*均等3分割*/
.pc5R {
  width: 41.66%;
  float: right;
}

.pck5R {
  width: 20%;
  float: right;
}

/*均等5分割*/
.pc6R {
  width: 50%;
  float: right;
}

/*均等2分割*/
.pc7R {
  width: 58.33%;
  float: right;
}

.pc8R {
  width: 66.66%;
  float: right;
}

.pc9R {
  width: 74.99%;
  float: right;
}

.pc10R {
  width: 83.33%;
  float: right;
}

.pc11R {
  width: 91.66%;
  float: right;
}

@media screen and (max-width: 768px) {
  .tb_look {
    display: block;
  }

  /*タブレットサイズから下サイズは表示*/
  .tb_none {
    display: none;
  }

  /*タブレットで非表示*/
  .tb1 {
    width: 100%;
    margin: 0 auto;
    float: none;
  }

  .tb2 {
    width: 49.99%;
    float: left;
    box-sizing: border-box;
    padding: 0 5px;
  }

  .tb3 {
    width: 33.33%;
    float: left;
    box-sizing: border-box;
    padding: 0 5px;
  }

  /*均等3分割*/
  .tb4 {
    width: 24.99%;
    float: left;
    box-sizing: border-box;
    padding: 0 5px;
  }

  /*均等4分割*/
}

/*max-width: 768px*/

@media screen and (max-width: 480px) {
  .sp_look {
    display: block;
  }

  /*タブレットサイズから下サイズは表示*/
  .sp_none {
    display: none;
  }

  /*スマホで非表示*/
  .sp1 {
    width: 100%;
  }

  /*画面サイズ*/
  .sp2 {
    width: 49.99%;
    float: left;
    padding: 5px;
    box-sizing: border-box;
  }

  /*均等2分割*/
  .sp3 {
    width: 33.33%;
    float: left;
    padding: 5px;
    box-sizing: border-box;
  }

  /*均等3分割*/
  .sp4 {
    width: 24.99%;
    float: left;
    padding: 5px;
    box-sizing: border-box;
  }

  /*均等3分割*/

  .spL {
    width: 100%;
    float: left;
  }

  .spR {
    width: 100%;
    float: right;
  }

  .spbtn {
    float: none;
    text-align: center;
    display: block;
    margin: 20px 0px;
  }
}

/*max-width: 480px*/

/*記述例
PC・・・非表示、　スマホ・・・表示、
<div class="pc_none sp1～4"></div>

PC・・・表示、スマホ・・・非表示、
<div class="pc1～12 sp_none"></div>*/
@charset "utf-8";
/* --------------------------------------------------
サイト共通のクラス
-------------------------------------------------- */

/* テーブル
------------------------------ */
.table_basic {
  border-collapse: separate;
  border-spacing: 1px;
  background: #CCC;
  border-style: none;
}

.table_basic th {
  background-color: #EEE;
  padding: 6px 10px;
  font-weight: normal;
  border-top: 1px solid #FFF;
}

.table_basic td {
  background-color: #FFF;
  padding: 6px 10px;
  border-top: 1px solid #FFF;
}

.table_basic tr.odd td {
  background-color: #FAFAFA;
}

/* jQuery ColorBox
------------------------------ */
#colorbox,
#cboxOverlay,
#cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
}

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
}

#cboxMiddleLeft,
#cboxBottomLeft {
  clear: left;
}

#cboxContent {
  position: relative;
}

#cboxLoadedContent {
  overflow: auto;
}

#cboxTitle {
  margin: 0;
}

#cboxLoadingOverlay,
#cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#cboxPrevious,
#cboxNext,
#cboxClose,
#cboxSlideshow {
  cursor: pointer;
}

.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: none;
}

.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

#colorbox,
#cboxContent,
#cboxLoadedContent {
  box-sizing: content-box;
}

/* カスタマイズ用 */
#cboxOverlay {
  background: #000;
}

#colorbox {}

#cboxContent {
  margin-top: 20px;
}

.cboxIframe {
  background: #fff;
}

#cboxError {
  padding: 50px;
  border: 1px solid #ccc;
}

#cboxLoadedContent {
  border: 5px solid #000;
  background: #fff;
}

#cboxTitle {
  position: absolute;
  top: -20px;
  left: 0;
  color: #ccc;
}

#cboxCurrent {
  position: absolute;
  top: -20px;
  right: 0px;
  color: #ccc;
}

#cboxSlideshow {
  position: absolute;
  top: -20px;
  right: 90px;
  color: #fff;
}

#cboxPrevious {
  position: absolute;
  top: 50%;
  left: 5px;
  margin-top: -32px;
  background: url(../img/jquery.colorbox.controls.png) no-repeat top left;
  width: 28px;
  height: 65px;
  text-indent: -9999px;
}

#cboxPrevious:hover {
  background-position: bottom left;
}

#cboxNext {
  position: absolute;
  top: 50%;
  right: 5px;
  margin-top: -32px;
  background: url(../img/jquery.colorbox.controls.png) no-repeat top right;
  width: 28px;
  height: 65px;
  text-indent: -9999px;
}

#cboxNext:hover {
  background-position: bottom right;
}

#cboxLoadingOverlay {
  background: #000;
}

#cboxLoadingGraphic {
  background: url(images/loading.gif) no-repeat center center;
}

#cboxClose {
  position: absolute;
  top: 5px;
  right: 5px;
  display: block;
  background: url(../img/jquery.colorbox.controls.png) no-repeat top center;
  width: 38px;
  height: 19px;
  text-indent: -9999px;
}

#cboxClose:hover {
  background-position: bottom center;
}

/* jQueryツールチップ
------------------------------ */
.tipsy {
  padding: 5px;
  position: absolute;
  z-index: 100000;
}

.tipsy-inner {
  padding: 5px 8px 4px 8px;
  background-color: #000;
  color: #fff;
  max-width: 200px;
  text-align: center;
}

.tipsy-inner {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

.tipsy-arrow {
  position: absolute;
  background: url(../img/jquery.tipsy.gif) no-repeat left top;
  width: 9px;
  height: 5px;
}

.tipsy-n .tipsy-arrow {
  top: 0;
  left: 50%;
  margin-left: -4px;
}

.tipsy-nw .tipsy-arrow {
  top: 0;
  left: 10px;
}

.tipsy-ne .tipsy-arrow {
  top: 0;
  right: 10px;
}

.tipsy-s .tipsy-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -4px;
  background-position: bottom left;
}

.tipsy-sw .tipsy-arrow {
  bottom: 0;
  left: 10px;
  background-position: bottom left;
}

.tipsy-se .tipsy-arrow {
  bottom: 0;
  right: 10px;
  background-position: bottom left;
}

.tipsy-e .tipsy-arrow {
  top: 50%;
  margin-top: -4px;
  right: 0;
  width: 5px;
  height: 9px;
  background-position: top right;
}

.tipsy-w .tipsy-arrow {
  top: 50%;
  margin-top: -4px;
  left: 0;
  width: 5px;
  height: 9px;
}

@charset "utf-8";

/* --------------------------------------------------
サイト共通レイアウト用のCSS
-------------------------------------------------- */
/* HTMLタグ再定義
------------------------------ */
body {
  /* min-width: 1100px; */
  -webkit-text-size-adjust: none;
  background-color: #ffffff;
  /* overflow: hidden; */
}

body {
  letter-spacing: 0em;
  margin: 0px;
  padding: 0px;
  border: none;
  line-height: 180%;
  font-size: 16px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #000000;
}

a:link,
a:visited,
a:active {
  color: #1d2088;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:hover {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}

small {
  font-size: 85%;
}

hr {
  margin: 20px 0px;
  padding: 0px;
}

.photoimg {
  padding: 4px;
  border: 1px solid #d7d7d7;
  background-color: #ffffff;
}

.mb01 {
  margin-bottom: 1px !important;
}

.mb03 {
  margin-bottom: 3px !important;
}

h1 {
  font-size: 11px;
  text-align: left;
}

/* ヘッダー
------------------------------ */
#header_position {
  position: fixed;
  height: 185px;
  z-index: 1100;
  left: 0px;
  right: 0px;
  background-color: hsla(0, 0%, 100%, 0.9);
}

#header {}

#headerInner {
  width: 1100px;
  margin: 0px auto;
  height: 125px;
  position: relative;
}

.logo {
  position: absolute;
  left: 1px;
  top: 30px;
}

.toiawase_btn {
  position: absolute;
  right: 1px;
  top: 30px;
  background: #ff0094;
  font-weight: 600;
}

.toiawase_btn a,
.toiawase_btn a:hover,
.toiawase_btn a:active,
.toiawase_btn a:visited {
  color: #fff;
  display: block;
  text-decoration: none;
  padding: 20px 20px;
}

.headertel {
  position: absolute;
  right: 0px;
  top: 20px;
}

.headercontact {
  position: absolute;
  right: 0px;
  top: 62px;
}

#gnavi {
  height: 60px;
}

#gnaviInner {
  width: 1100px;
  padding-top: 1px !important;
  margin-bottom: 20px !important;
  margin-right: auto;
  margin-left: auto;
}

#gnaviInner nav ul {
  display: table;
  table-layout: fixed;
  width: 1100px;
}

#gnaviInner nav ul li:first-child {
  border-left: 1px solid #bdbdbd;
}

#gnaviInner nav ul li:nth-child(2) {}

#gnaviInner nav ul li {
  margin: 0;
  display: table-cell;
  vertical-align: middle;
  /*    position: relative;*/
  /*  float: left;*/
  flex: 1;
  text-align: center;
  border-right: 1px solid #bdbdbd;
  line-height: 1.2rem;
}

#gnaviInner nav ul li a {
  padding-top: 10px;
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 10px;
  display: block;
  text-decoration: none;
  color: #1d2088;
  font-weight: bold;
  flex: 1;
}

/* コンテンツ
------------------------------ */
#contents {
  margin-top: 70px;
  position: relative;
}

.contentsInner {
  max-width: 1150px;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding-left: 25px;
  padding-right: 25px;
}

.flexarea {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  /*折り返し有り・複数行*/
  justify-content: space-between;
  /*均等に間隔をあける*/
}

.flexarea02 {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  /*折り返し有り・複数行*/
  justify-content: center;
}

.flexarea02 div {
  padding: 0 1%;
}

/* コンテンツ（メインカラム）
	------------------------------ */
#main {}

#mainInner {}

/* コンテンツ（サブカラム）
	------------------------------ */
#side {}

#sideInner {}

/* フッター
------------------------------ */
#footer {
  color: #ffffff;
  margin-top: 60px;
  padding-top: 30px;
  font-size: 16px;
  background-color: #f3fbff;
}

.pagetop2 {
  position: fixed;
  bottom: 24px;
  right: 44px;
  margin: 0 auto;
  z-index: 200;
}

@media (max-width: 767px) {
  .pagetop2 {
    bottom: 51px;
    right: 10px;
    width: 40px;
  }
}

.lp-pagetop2 {
  position: fixed;
  bottom: 24px;
  right: 44px;
  margin: 0 auto;
  z-index: 200;
  z-index: 9999;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@media (max-width: 767px) {
  .lp-pagetop2 {
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
  }
}

#footer a {
  background-image: url(../img/ico_arrows01.webp);
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 20px;
  margin-right: 40px;
  display: inline-block;
}

#footer .sitemapnavi {
  text-align: left;
  width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 150px;
}

.copyright {
  padding-bottom: 30px;
  padding-top: 30px;
  font-size: 14px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  margin-top: 10px;
  color: #484848;
}

#footerDeviceswitch {
  background: #eee;
  padding: 9px 0px;
  text-align: center;
  color: #666666;
  margin-top: 10px;
  display: none;
}

#footerDeviceswitch li {
  display: inline-block;
}

#footerDeviceswitch li:after {
  content: "｜";
}

#footerDeviceswitch li:last-child:after {
  content: "";
}

#footerDeviceswitch input.text {
  background: url(../sp2/css/none);
  margin: 0px;
  padding: 0px;
  border-style: none;
  display: inline;
  color: #666;
  font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

@charset "utf-8";
/* --------------------------------------------------
スタイル付きのエリア
<div class="styled"></div>
-------------------------------------------------- */

/* 枠
------------------------------ */
.styled {
  margin-top: 30px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 50px;
  position: relative;
  text-align: left !important;
}

.styled .section {
  margin-top: 0px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 50px;
  position: relative;
}

.styled .section02 {
  margin-top: 0px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 50px;
  position: relative;
  clear: both;
  scroll-margin-top: 100px;
}

/* 見出し
------------------------------ */
h2 {
  position: relative;
  padding-top: 15px;
  padding-left: 15px;
  padding-bottom: 15px;
  font-size: 20px;
  color: #262626;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
}

h3 {
  font-size: 25px;
  margin-bottom: 30px;
  background-image: url(../img/category/h3_bg.webp);
  background-repeat: no-repeat;
  background-position: left bottom;
  color: #434343;
  padding-left: 20px;
  padding-bottom: 14px;
  text-align: left;
}

.styled h4 {
  font-size: 20px;
  line-height: 150%;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: normal;
  margin-top: 50px;
  margin-right: 0px;
  margin-bottom: 30px;
  margin-left: 0px;
  border-left: 8px solid #969595;
  text-align: left;
  background-color: #dfdfdf;
}

/* .styled h5 {
}
.styled h6 {
} */
/* 段落
------------------------------ */
.styled p {
  padding-top: 0px;
  padding-right: 0px;
  padding-left: 0px;
  /* padding-bottom: 20px; */
  line-height: 170%;
}

/* リスト
------------------------------ */
/* .styled ul {
  margin-top: 15px;
  margin-right: 0px;
  margin-left: 10px;
  margin-bottom: 15px;
  padding-top: 0px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 0px;
} */
.styled li ul {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 50px;
  margin-bottom: 15px;
  padding-top: 0px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 0px;
  font-size: 14px;
}

.styled ul li {
  /* list-style: disc;
  margin-top: 0.4em;
  margin-bottom: 0.4em; */
  padding-left: 0;
  margin-left: 0;
  list-style: none;
}

/* 番号付き
------------------------------ */
.styled ol {
  margin: 15px 0px 15px 25px;
  padding: 0px 20px;
}

.styled ol ol {
  margin: 0px 0px 0px 25px;
  padding: 0px;
}

.styled ol li {
  list-style: decimal;
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

/* テーブル
------------------------------ */
.styled .table {
  margin: 10px 0px;
  border: 1px solid #cccccc;
}

.styled .table th,
.styled .table td {
  padding: 8px 10px;
  vertical-align: top;
  border-top: 1px solid #cccccc;
  background-color: #ffffff;
}

.styled .table th {
  background: #eee;
}

.styled .table th.pt01 {
  background-color: #a5cd3c;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

.styled .table th.pt02 {
  background-color: #00a1e9;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

.styled .table th.pt03 {
  background-color: #01b3cd;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

.styled .table thead th {
  vertical-align: bottom;
}

.styled .table caption+thead tr:first-child th,
.styled .table caption+thead tr:first-child td,
.styled .table colgroup+thead tr:first-child th,
.styled .table colgroup+thead tr:first-child td,
.styled .table thead:first-child tr:first-child th,
.styled .table thead:first-child tr:first-child td {
  border-top: 0;
}

.styled .table tbody+tbody {
  border-top: 2px solid #dddddd;
}

.styled .table-condensed th,
.styled .table-condensed td {
  padding: 4px 5px;
}

.styled .table-bordered {
  border-collapse: separate;
  /* *border-collapse: collapse; */
  border-left: 0 solid #cccccc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border-top: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}

.styled .table-bordered th,
.styled .table-bordered td {
  border-left: 1px solid #cccccc;
}

.styled .table-bordered caption+thead tr:first-child th,
.styled .table-bordered caption+tbody tr:first-child th,
.styled .table-bordered caption+tbody tr:first-child td,
.styled .table-bordered colgroup+thead tr:first-child th,
.styled .table-bordered colgroup+tbody tr:first-child th,
.styled .table-bordered colgroup+tbody tr:first-child td,
.styled .table-bordered thead:first-child tr:first-child th,
.styled .table-bordered tbody:first-child tr:first-child th,
.styled .table-bordered tbody:first-child tr:first-child td {
  border-top: 0;
}

.styled .table-bordered thead:first-child tr:first-child th:first-child,
.styled .table-bordered tbody:first-child tr:first-child td:first-child {
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
}

.styled .table-bordered thead:first-child tr:first-child th:last-child,
.styled .table-bordered tbody:first-child tr:first-child td:last-child {
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
  -moz-border-radius-topright: 4px;
}

.styled .table-bordered thead:last-child tr:last-child th:first-child,
.styled .table-bordered tbody:last-child tr:last-child td:first-child,
.styled .table-bordered tfoot:last-child tr:last-child td:first-child {
  -webkit-border-radius: 0 0 0 4px;
  -moz-border-radius: 0 0 0 4px;
  border-radius: 0 0 0 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
}

.styled .table-bordered thead:last-child tr:last-child th:last-child,
.styled .table-bordered tbody:last-child tr:last-child td:last-child,
.styled .table-bordered tfoot:last-child tr:last-child td:last-child {
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
}

.styled .table-bordered caption+thead tr:first-child th:first-child,
.styled .table-bordered caption+tbody tr:first-child td:first-child,
.styled .table-bordered colgroup+thead tr:first-child th:first-child,
.styled .table-bordered colgroup+tbody tr:first-child td:first-child {
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
}

.styled .table-bordered caption+thead tr:first-child th:last-child,
.styled .table-bordered caption+tbody tr:first-child td:last-child,
.styled .table-bordered colgroup+thead tr:first-child th:last-child,
.styled .table-bordered colgroup+tbody tr:first-child td:last-child {
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
  -moz-border-radius-topleft: 4px;
}

.styled .table-striped tbody tr:nth-child(odd) td,
.styled .table-striped tbody tr:nth-child(odd) th {
  background-color: #f9f9f9;
}

.styled .table-hover tbody tr:hover td,
.styled .table-hover tbody tr:hover th {
  background-color: #f5f5f5;
}

.styled form input.inputtext,
.styled form textarea.inputtext {
  margin: 1px;
  padding: 3px;
  border: 1px solid #bbb;
}

.styled #facebook {
  background-color: #f0f0f0;
  padding: 10px;
}

.styled .fb-page.fb_iframe_widget {
  text-align: center;
  display: block;
}

/* テーブル
------------------------------ */
.styled .table_shop {
  margin-right: 0px;
  margin-left: 0px;
  margin-bottom: 10px;
  border: 1px solid #cccccc;
  float: right;
  width: 64%;
}

.styled .table_shop th,
.styled .table_shop td {
  padding: 8px 10px;
  vertical-align: top;
  border-top: 1px solid #cccccc;
  background-color: #ffffff;
}

.styled .table_shop th {
  background-color: #bcf0f8;
}

/* テーブル
------------------------------ */
.styled .table_shop02 {
  margin: 10px 0px;
  border: 1px solid #cccccc;
}

.styled .table_shop02 th,
.styled .table_shop02 td {
  padding: 8px 10px;
  vertical-align: top;
  border-top: 1px solid #cccccc;
  background-color: #ffffff;
}

.styled .table_shop02 th {
  background-color: #bcf0f8;
}

/* テーブル
------------------------------ */
.styled .table_waku {
  margin-right: 0px;
  margin-left: 0px;
  margin-bottom: 10px;
}

.styled .table_waku th,
.styled .table_waku td {
  padding: 8px 10px;
  vertical-align: top;
  background-color: #ffffff;
}

.styled .table_waku th {
  background-color: #bcf0f8;
}

@charset "utf-8";

/* --------------------------------------------------
ページ別のCSS（トップページ含む）
-------------------------------------------------- */
/* メインイメージ1
------------------------------ */
.content {
  width: 100%;
  /*    height: 350px;*/
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 200px;
}

@media (max-width: 768px) {
  .content {
    margin-top: 80px;
  }
}

.content .mainimgInner {
  width: 1100px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.content .imgtxt {
  position: absolute;
  left: 30px;
  top: 30px;
  z-index: 100;
}

/* index.html
------------------------------ */
.top_youki {
  width: 1100px;
  margin: 0 0 15px 0;
}

.top_youki img {
  width: 100%;
}

.kakuyasu {
  max-width: 1100px;
  margin: 0 auto 30px auto;
  padding: 0;
  position: relative;
}

.kakuyasu img.spnone {
  margin: 0;
  padding: 0;
  display: block;
}

.kakuyasu .kakuyasu_gal {
  background: #e60012;
  padding: 0 0 10px;
}

.kakuyasu .kakuyasu_gal img {
  width: 48%;
  margin: 0 1%;
}

.kakuyasu .btn {
  display: block;
  margin: 20px auto;
  max-width: 350px;
  background: #fcb212;
  color: #fff;
  padding: 15px;
  border-radius: 6px;
  transition: 0.3s;
}

.kakuyasu .btn:hover {
  text-decoration: none;
  background: #a5cd3c;
  transition: 0.3s;
}

.alcoholList {
  max-width: 1074px;
  margin: 0 auto 30px auto;
  padding: 0px 10px 10px 10px;
  border: solid 3px #ff0094;
}

.alcoholList .text {
  text-align: left;
  font-weight: bold;
}

.alcoholList .table_waku td {
  margin: 0 0 1em 0;
  font-weight: normal;
}

.balloon1 {
  position: relative;
  /*display: inline-block;*/
  margin: 1em 0 1.5em 0;
  padding: 14px 14px 14px 14px;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  font-size: 22px;
  background: #ff0094;
  font-weight: bold;
  border-radius: 15px;
  text-align: center;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #ff0094;
}

.balloon1 p {
  margin: 0;
  padding: 0;
}

/*トップレンタル商品*/
.rental {
  max-width: 1074px;
  margin: 0 auto 30px auto;
  padding: 0px 10px 10px 10px;
  border: solid 3px #76cc00;
}

.rental .balloon1 {
  position: relative;
  /*display: inline-block;*/
  margin: 1em 0 1.5em 0;
  padding: 14px 14px 14px 14px;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  font-size: 22px;
  background: #76cc00 !important;
  font-weight: bold;
  border-radius: 15px;
  text-align: center;
}

.rental .balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #76cc00 !important;
}

.rental .flexarea {
  justify-content: center;
  align-items: center;
}

.rental .flexarea div {
  text-align: left;
}

.rental .flexarea div.img {
  width: 17%;
}

.rental .flexarea div.img img {
  width: 100%;
}

.rental .flexarea div.text {
  width: 80%;
}

.rental .flexarea div.text .lead {
  color: #76cc00;
  font-weight: bold;
}

.rental .flexarea div.text dl {
  justify-content: space-between;
  align-items: stretch;
}

.rental .flexarea div.text dl dt,
.rental .flexarea div.text dl dd {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.rental .flexarea div.text dl dt {
  border: 1px solid #76cc00;
  border-radius: 10px;
  color: #76cc00;
  font-weight: bold;
  width: 18%;
  justify-content: center;
}

.rental .flexarea div.text dl dd {
  width: 80%;
  display: block;
}

#tub {
  margin-top: 50px;
}

/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  width: 1100px;
  margin: 0 auto;
}

/*タブのスタイル*/
.tab_item {
  width: calc(100% / 2);
  height: 50px;
  border-bottom: 3px solid #fcb212;
  background-color: #fef1d5;
  line-height: 50px;
  font-size: 22px;
  text-align: center;
  color: #fcb212;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  padding-top: 15px;
  padding-bottom: 10px;
}

.tab_item:hover {
  opacity: 0.75;
}

.tab_item .animation {
  animation: flash 1s linear infinite;
}

@keyframes flash {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding-top: 50px;
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 0;
  clear: both;
  overflow: hidden;
  border-bottom: 3px solid #fcb212;
  border-left: 3px solid #fcb212;
  border-right: 3px solid #fcb212;
}

/*来店*/
.raiten {
  text-align: center;
}

/*配達*/
.takuhai {
  position: relative;
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.takuhaiBox {
  width: 100%;
  margin-top: 50px;
}

.takuhaiBox001 {
  float: left;
}

.takuhaiBox002 {
  /*float: right;*/
}

.takuhaiBox003 {
  float: right;
}

.takuhaiBox004 {
  float: left;
  margin-top: 100px;
}

.takuhaiBox005 {
  float: right;
}

.takuhaitxt {
  font-size: 28px;
  font-weight: bold;
  color: #fcb212;
  text-align: left;
  line-height: 180%;
}

/*選択されているタブのコンテンツのみを表示*/
#all:checked~#all_content,
#programming:checked~#programming_content,
#design:checked~#design_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked+.tab_item {
  background-color: #fcb212;
  color: #fff;
}

/*こだわり*/
.kodawari {
  background-image: url(../img/index/bg_indexkodawari01.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  padding-bottom: 35px;
}

.kodawari .title {
  background-image: url(../img/index/titlebg_indexkodawari01.png);
  background-repeat: no-repeat;
  background-position: center center;
  padding-top: 40px;
  margin-bottom: 20px;
}

.kodawari .kodawariBox {
  font-size: 18px;
  color: #1d2088;
}

/*商品のご案内*/
.item {
  padding: 2em 0 2em 0;
}

.item .title {
  background-repeat: no-repeat;
  background-position: center center;
  padding-top: 60px;
  margin-bottom: 20px;
  background-image: url(../img/index/titlebg_indexitem01.png);
}

.item .itemBox {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.item .itemBox {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.item .itembtn a {
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  background-color: #00a1e9;
  border-radius: 4px;
  display: block;
  width: 350px;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-left: auto;
  margin-right: auto;
}

.item .itembtn a:hover {
  background-color: #a5cd3c;
  text-decoration: none;
}

/*お客様の声*/
.voice {
  padding-bottom: 30px;
}

.voice .title {
  background-repeat: no-repeat;
  background-position: center center;
  padding-top: 60px;
  margin-bottom: 20px;
  background-image: url(../img/index/titlebg_indexvoice01.png);
}

.voice .voiceBox {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  border-radius: 10px;
  border: 1px solid #00a1e9;
  text-align: left;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  width: 288px;
  font-size: 14px;
  line-height: 160%;
}

.voice .voiceBox .stitle {
  color: #00a1e9;
  font-size: 16px;
  font-weight: bold;
}

.voice .voiceBox p {
  margin-bottom: 10px;
}

.voice .voiceBox span {
  color: #ffffff;
  padding-top: 2px;
  padding-right: 2px;
  padding-bottom: 2px;
  padding-left: 2px;
  background-color: #a5cd3c;
  margin-right: 10px;
  font-size: 12px;
}

.img_indexraiten004 {
  width: 855px;
  margin: 0 auto;
  padding: 30px;
}

.img_indexraiten004 p {
  float: left;
  width: 550px;
  font-size: 30px;
  color: #00a5e5;
  line-height: 42px;
  font-weight: bold;
  text-align: left;
  padding: 10px 0;
}

.img_indexraiten004 img {
  float: right;
  width: 304px;
}

.bgindexraiten {
  background-color: #fbf9e0;
  padding: 0px 15px 15px;
  margin: 0 40px 60px;
}

/* 2nd
------------------------------ */
#mainimg2nd01 {
  background-color: #dcdcdc;
  margin-top: 100px;
}

#mainimg2nd02 {
  background-image: url(../img/category/bg_h2.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  padding-top: 50px;
  padding-bottom: 50px;
  margin-top: 100px;
}

.faq {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  border-radius: 10px;
  border: 1px solid #00a1e9;
  text-align: left;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

.sitemap ul.box01 {
  margin-left: 250px;
}

/*--------------------------*/
.flexarea div {
  display: inline-block;
}

.telBox01 {
  margin-bottom: 20px;
  border: 5px solid #efefef;
  width: 89%;
  padding-top: 0px;
  padding-right: 5%;
  padding-left: 5%;
  padding-bottom: 20px;
}

.telBox01 .flexarea div {
  width: 32%;
  float: left;
  margin: 0 1% 0 0;
}

.telBox01 .flexarea div {
  width: 32%;
  float: left;
  margin: 0 1% 0 0;
}

.telBox01 .flexarea div:nth-child(3n) {
  width: 32%;
  float: left;
  margin: 0;
}

.telBox01 .flexarea div img {
  width: 100%;
}

/*--------------------------*/
.midashitxt {
  font-size: 22px;
  font-weight: bold;
  color: #00a1e9;
  text-align: center;
  line-height: 180%;
  padding-bottom: 0px;
  margin-bottom: 50px;
  margin-top: 48px;
}

@media (max-width: 768px) {
  .midashitxt {
    margin-top: 24px;
  }
}

.photoBox01 {
  margin-bottom: 20px;
  border: 1px solid #c1c2f4;
  text-align: left;
  width: 22%;
  padding: 1%;
}

.photoBox01 img {
  width: 100%;
}

/* 店舗紹介*/
.shopBox01 {
  width: 34%;
  float: left;
}

.shopBox01 img {
  width: 100%;
}

.nedan {
  color: #f16434;
  border: 1px solid #f16434;
  padding: 5px;
  width: 250px;
}

.shopBox01 .swiper_slide .swiper-wrapper {
  margin-bottom: 10px;
}

.shopBox01 .swiper_slide .swiper-wrapper .swiper-slide {
  text-align: center;
  height: 280px;
  overflow: hidden;
}

.shopBox01 .swiper_slide .swiper-wrapper .swiper-slide img,
.shopBox01 .swiper_thum .swiper-wrapper .swiper-slide img {
  width: 100%;
  object-fit: cover;
}

.shopBox01 .swiper_thum .swiper-wrapper {
  justify-content: center;
}

.shopBox01 .swiper_thum .swiper-wrapper .swiper-slide {
  width: 84px !important;
  height: 63px !important;
  padding: 0 5px;
  text-align: center;
}

.shopBox01 .swiper_thum .swiper-wrapper .swiper-slide:hover {
  cursor: pointer;
}

.shopBox01 .swiper_thum .swiper-wrapper .swiper-slide:first-child {
  padding-left: 0;
}

.shopBox01 .swiper_thum .swiper-wrapper .swiper-slide:last-child {
  padding-right: 0;
}

/* 外枠消す
.shop_infoBox {
  border: #00A3E1 3px solid;
  padding: 15px;
  margin: 20px 0 0 0;
  clear: both;
} */
/* .shop_infoBox p {
  color: #00a3e1;
  font-weight: 600;
  text-align: center;
} */
.shop_infoBox dl div {
  border-bottom: solid 1px #eeeeee;
  margin: 15px 0;
}

.shop_infoBox dt {
  width: 120px;
  float: left;
}

.shop_infoBox dt::after {
  content: "　";
}

.text-divider {
  display: flex;
  align-items: center;
  color: #1d2088;
  font-weight: 800;
  scroll-margin-top: 90px;
}

@media (max-width: 767px) {
  .text-divider {
    scroll-margin-top: 40px;
  }
}

.text-divider::before,
.text-divider::after {
  content: "";
  height: 4px;
  background-color: #009fe5;
  flex-grow: 1;
}

.text-divider::before {
  margin-right: 1rem;
}

.text-divider::after {
  margin-left: 1rem;
}

ul.area_btn {
  display: flex;
  align-content: stretch;
  margin: 0 0 30px 0;
  padding: 0;
}

ul.area_btn li {
  display: block;
  list-style: none;
  text-decoration: none;
  background: #00a3e1;
  border-radius: 6px;
  width: 30%;
  margin: 0 10px;
}

ul.area_btn li a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 15px 0;
  color: #fff;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

ul.area_btn li a:active,
ul.area_btn li a:hover,
ul.area_btn li a:visited {
  display: block;
  color: #fff;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

ul.shop_btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: stretch;
  margin: 0 0 30px 0;
  padding: 0;
}

ul.shop_btn li {
  display: block;
  list-style: none;
  text-decoration: none;
  vertical-align: middle;
  background: #dcf4ff;
  border-radius: 6px;
  width: 19%;
  margin: 5px;
}

ul.shop_btn li a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 15px 0;
  color: #00a3e1;
  font-size: 0.9em;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
}

ul.shop_btn li a:active,
ul.shop_btn li a:hover,
ul.shop_btn li a:visited {
  display: block;
  color: #00a3e1;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
}

.shopListBox {
  margin: 0 0 50px 0;
  scroll-margin-top: 100px;
}

/* リンク設定*/
#lineup_a00,
#lineup_a01,
#lineup_a02,
#lineup_a03,
#lineup_a04 {
  margin-top: -230px;
  padding-top: 230px;
}

/*#a1, #a2, #a3, #a4, #a5, #a6, #a7, #a8, #a9, #a10, #a11, #a12, #a13, #a14, #a15, #a16 {
	margin-top: -230px;
	padding-top: 230px;
}*/
/*お知らせfloat設定*/
.fLLBox {
  float: left;
  width: 30%;
  margin-right: 2%;
}

.fLLBox img {
  width: 100%;
}

/*============================================
共通
============================================*/
.inner {
  max-width: 1150px;
  padding-left: 25px;
  padding-right: 25px;
  margin-left: auto;
  margin-right: auto;
  /* width: 100%; */
}

@media (max-width: 767px) {
  .inner {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}

.title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  text-align: center;
  font-weight: 500;
  color: #1d2088;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .title {
    font-size: 20px;
  }
}

a[href^="tel:"] {
  pointer-events: none;
}

@media (max-width: 767px) {
  a[href^="tel:"] {
    pointer-events: auto;
  }
}

/*============================================
md
============================================*/
.md-show {
  display: none;
}

@media (max-width: 767px) {
  .md-show {
    display: block;
  }
}

@media (max-width: 767px) {
  .md-none {
    display: none;
  }
}

.md-text-show {
  display: none;
}

@media (max-width: 768px) {
  .md-text-show {
    display: block;
  }
}

@media (max-width: 768px) {
  .md-text-none {
    display: none;
  }
}

/*============================================
ヘッダー（全ページ共通）
============================================*/
/*
【ヘッダー関連スタイルの管理場所】
全てのヘッダースタイルはpages.cssで一元管理されています。

■ PC版ヘッダー（このセクション）
  - .header: 高さ80px、背景白、パディング設定
  - .header__logo: レスポンシブ対応（最大幅200px、画像高さ45px）
  - .header__nav: PC版メインメニュー（スマホでは非表示）
  - .header__drawer: ドロワーメニュー（上からスライド、幅88%）

■ スマホ版ヘッダー（8716行以降）※別セクション
  - .header__hamburger: PC版では非表示、スマホ版で表示
  - .header.layout-header.js-header: ハンバーガーメニュー付きヘッダー（高さ50px）
  - @media (max-width: 768px) 内で定義

全ページ共通のヘッダーなので、修正する際はpages.cssのみを編集してください。
個別HTMLファイルにヘッダースタイルを追加しないでください。
*/

.layout-header {
  position: fixed;
  z-index: 900;
  right: 0;
  left: 0;
  top: 0;
}

/* 旧スタイル削除: モバイル版ヘッダーはハンバーガーメニュー用の統一スタイル(.header.layout-header.js-header)を使用 */

.header {
  height: 80px;
  background-color: #fff;
  padding-right: 39px;
  padding-left: 60px;
}

/* 旧スタイル削除: モバイル版ヘッダーはハンバーガーメニュー用の統一スタイル(.header.layout-header.js-header)を使用 */

.header__inner {
  display: flex;
  height: inherit;
  margin-right: auto;
  margin-left: auto;
}

/* PC版: ヘッダーロゴのレスポンシブ設定 */
.header__logo {
  height: inherit;
  max-width: 200px;
  width: 100%;
  margin-left: -40px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header__logo a {
  display: flex;
  align-items: center;
  width: auto;
  height: 100%;
}

.header__logo a img {
  width: auto;
  height: 100%;
  max-height: 60px;
  object-fit: contain;
}

/* タブレット・小型PC用のロゴ調整 */
@media (max-width: 1024px) and (min-width: 769px) {
  .header__logo {
    max-width: 180px;
  }

  .header__logo a img {
    max-height: 54px;
  }
}

/* スマホ版 */
@media (max-width: 768px) {
  .header__logo {
    display: none;
  }

  /* スマホ版: ハンバーガーメニュー用ヘッダーではロゴを表示 */
  .header.layout-header.js-header .header__logo {
    display: flex !important;
    flex-shrink: 0 !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    max-width: none !important;
    width: auto !important;
  }
}



.header__nav {
  height: inherit;
  margin-left: auto;
}

@media (max-width: 768px) {
  .header__nav {
    display: none;
  }
}

.header__nav-list {
  display: flex;
  height: inherit;
}

.header__nav-item {
  height: inherit;
}

.header__nav-item a {
  padding: 0 20px;
  height: inherit;
  display: flex;
  font-family: "Noto Sans JP", sans-serif;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: #1d2088;
  text-transform: uppercase;
}

.header__hamburger {
  display: none !important;
}

.header__nav-item.header__nav-item--selected a {
  text-decoration: underline;
}

.header__nav-item.header__nav-item--contact {
  margin-left: 15px;
  display: flex;
  align-items: center;
}

.header__nav-item.header__nav-item--contact a {
  font-family: "Noto Sans JP", sans-serif;
  padding: 8px 40px;
  position: relative;
  height: initial;
  color: #fff;
  font-weight: 500;
  font-size: 24px;
  background-color: #fc006e;
  border-radius: 40px;
  border: solid 2px #fc006e;
  transition: 0.3s;
}

.header__nav-item.header__nav-item--contact a:hover {
  border: solid 2px #fc006e;
  color: #fc006e;
  background-color: #fff;
  transition: 0.3s;
  text-decoration: none;
}

/* 古いハンバーガースタイルを削除 - スマホ版のスタイルに統一 */

/*============================================
ドロワーメニュー
============================================*/

.header__drawer {
  padding: 70px 0;
  position: absolute;
  z-index: 899;
  /* ヘッダー(900)より下にする */
  top: 60px;
  left: 0;
  width: 100%;
  overflow-y: scroll;
  scrollbar-width: none;
  transition: 0.4s;
  background-color: rgba(29, 32, 136, 0.95);
  border-radius: 0 0 20px 20px;
  display: none;
}

@media (max-width: 768px) {
  .header__drawer {
    display: block;
    transform: translateY(-150%);
    /* 上に隠す */
    width: 88% !important;
    right: 0 !important;
    left: auto !important;
    margin-left: 0 !important;
  }
}

.header__drawer.is-open {
  transform: translateY(0);
  /* 下にスライド表示 */
}

.header__drawer::-webkit-scrollbar {
  display: none;
}

.header__drawer-item {
  text-align: center;
}

.header__drawer-item a {
  font-family: "Noto Sans JP", sans-serif;
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  padding: 23px 0;
}

.header__drawer-item.header__drawer-item--contact {
  margin-top: 20px;
}

.header__drawer-item.header__drawer-item--contact a {
  display: inline-block;
  color: #1d2088;
  background-color: #fff;
  border-radius: 100vh;
  padding: 8px 40px;
}

/*============================================
heading-nav（旧モバイルヘッダー）
============================================*/
/*
旧スタイル削除: heading-navは廃止
現在はハンバーガーメニュー付きヘッダー(.header.layout-header.js-header)を使用
全てのヘッダースタイルはページ上部の「ヘッダー」セクション（909-1100行付近）で一元管理
*/

#shop-guide {
  display: block;
  height: 0;
}

@media (max-width: 767px) {
  #shop-guide {
    position: relative;
    top: -80px;
  }
}

/*============================================
フッター
============================================*/
.footer {
  padding-top: 57px;
  padding-bottom: 38px;
  background-color: #1d2088;
}

@media (max-width: 767px) {
  .footer {
    padding: 45px 0 55px;
  }
}

.layout-footer {
  margin-top: 120px;
}

@media (max-width: 767px) {
  .layout-footer {
    margin-top: 67px;
  }
}

.footer__inner.inner {
  padding-left: 75px;
}

@media (max-width: 767px) {
  .footer__inner.inner {
    padding-left: 40px;
  }
}

.footer__wrap {
  display: flex;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .footer__wrap {
    flex-direction: column;
    align-items: center;
  }
}

.footer__left {}

.footer__logo {
  text-align: left;
  margin-left: -50px;
  max-width: 315px;
  width: 100%;
}

@media (max-width: 767px) {
  .footer__logo {
    text-align: center;
    margin-left: 0;
    max-width: 215px;
    margin-inline: auto;
  }
}

.footer__logo a {
  text-align: center;
  display: flex;
}

/* 冗長スタイル削除: .header__logo imgはヘッダーセクション(939-962行)で既に定義済み */

.footer__address {
  font-family: "Noto Sans JP", sans-serif;
  text-align: left;
  color: #fff;
  margin-top: 34px;
  font-weight: 300;
  font-size: 16px;
}

@media (max-width: 767px) {
  .footer__address {
    margin-top: 62px;
    text-align: center;
  }
}

.footer__address span {
  font-weight: 500;
}

.footer__tel a {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 30px;
  font-weight: 500;
  color: #fff700;
}

@media (max-width: 767px) {
  .footer__tel a {
    margin-top: 8px;
  }
}

.footer__time {
  font-size: 16px;
  font-weight: 300;
  color: #fff;
}

.footer__link {
  text-align: left;
  margin-top: 16px;
}

@media (max-width: 767px) {
  .footer__link {
    text-align: center;
  }
}

.footer__link a {
  color: #fff;
  display: block;
  line-height: 1;
}

.footer__right {
  max-width: 514px;
  width: 100%;
  display: flex;
  gap: 44px;
  flex-direction: column;
}

@media (max-width: 767px) {
  .footer__right {
    flex-direction: column-reverse;
  }
}

.footer__btn {}

.footer__btn a {
  display: inline-block;
  font-family: "Noto Sans JP", sans-serif;
  border-radius: 20px;
  padding: 19px 0;
  background-color: #e2e4fa;
  font-size: 26px;
  width: 100%;
  font-weight: 500;
  color: #1d2088;
}

@media (max-width: 767px) {
  .footer__btn a {
    font-size: 20px;
    padding: 10px 0;
  }
}

.footer__nav {
  /* margin-top: 44px; */
}

@media (max-width: 767px) {
  .footer__nav {
    margin-top: 50px;
    margin-inline: auto;
  }
}

.footer__nav-items {
  display: grid;
  justify-content: space-between;
  column-gap: 12px;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
  .footer__nav-items {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0px;
    row-gap: 20px;
  }
}

.footer__nav-item {
  text-align: left;
}

.footer__nav-item a {
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 767px) {
  .footer__nav-item a {
    font-size: 14px;
  }
}

.footer__copyright {
  display: inline-block;
  margin-top: 94px;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
}

.footer__copyright span {
  text-transform: uppercase;
}

/*============================================
mv_swiper
============================================*/
.mv__swiper .swiper-pagination {
  left: 44%;
  bottom: 5%;
}

.mv__swiper {
  overflow: hidden;
  border-radius: 20px 0 0 20px;
}

@media (max-width: 767px) {
  .mv__swiper {
    border-radius: 0;
  }
}

.swiper-img a {
  height: inherit;
  display: inline-block;
}

/*============================================
下層ページのトップ共通？
============================================*/

.page-top {}


.page-top__inner {}

@media (max-width: 767px) {
  .page-top__inner {}
}

.page-top__contents {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  width: 100%;
}

@media (max-width: 767px) {
  .page-top__contents {
    gap: 19px;
  }
}

.page-top__item {
  width: 100%;
}

.page-top__item a {
  font-family: "Noto Sans JP", sans-serif;
  display: inline-block;
  border-radius: 20px;
  padding: 40px 0;
  background-color: #e2e4fa;
  display: inline-block;
  font-size: 24px;
  border: 2px solid #1e2088;
  width: 100%;
  font-weight: 500;
  transition: 0.3s;
}

.page-top__item a:hover {
  background-color: #1d2088;
  border: 2px solid #1e2088;
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

@media (max-width: 767px) {
  .page-top__item a {
    font-size: 20px;
  }
}

.page-top__item.page-top__item--reverse a {
  background-color: #fff;
}

.page-top__item-primary {
  color: #fc036e;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 32px;
  transition: 0.3s;
}

.page-top__item a:hover .page-top__item-primary {
  color: #fff700;
  transition: 0.3s;
  text-decoration: none;
}

@media (max-width: 767px) {
  .page-top__item-primary {
    font-size: 20px;
  }
}

.sub-heading {
  padding: 88px 0;
  background-color: #e2e4fa;
  margin-top: 80px;
}

@media (max-width: 767px) {
  .sub-heading {
    padding: 60px 0;
    margin-top: 0;
  }
}

.sub-heading__text {
  text-align: center;
  color: #1d2088;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 40px;
  font-weight: 500;
}

@media (max-width: 767px) {
  .sub-heading__text {
    font-size: 20px;
  }
}

/*============================================
SHOP-MAP
============================================*/
.shop-map {
  overflow-x: auto;
  /* 横スクロールを可能にする */
  white-space: nowrap;
  /* 改行させず横スクロール */
  width: 100%;
  /* 画面幅いっぱい */
  -ms-overflow-style: none;
  /* IE, Edgeでスクロールバーを非表示 */
  scrollbar-width: none;
  /* Firefoxでスクロールバーを非表示 */
}

.shop-map ::-webkit-scrollbar {
  display: none;
  /* Chrome, Safariでスクロールバーを非表示 */
}

.shop-map img {
  margin-right: auto;
  margin-left: auto;
  aspect-ratio: 728/613;
  object-fit: cover;
  height: auto;
  display: block;
  width: 728px;
}

/*============================================
HOWTOUSE
============================================*/

.howtouse {}

.layout-howtouse {
  margin-top: 90px;
}

@media (max-width: 767px) {
  .layout-howtouse {
    margin-top: 41px;
  }
}

.howtouse__wrapper {
  width: 100%;
  margin-top: 50px;
}

@media (max-width: 767px) {
  .howtouse__wrapper {
    padding-bottom: 39px;
    border-bottom: 2px solid #1d2088;
  }
}

.howtouse__wrapper+.howtouse__wrapper {
  margin-top: 145px;
}

@media (max-width: 767px) {
  .howtouse__wrapper+.howtouse__wrapper {
    margin-top: 39.5px;
  }
}

.howtouse__title {
  scroll-margin-top: 80px;
}

@media (max-width: 767px) {
  .howtouse__title {
    scroll-margin-top: 40px;
  }
}

@media (min-width: 768px) {
  .howtouse__title {
    font-size: 28px;
  }
}


.howtouse__contents {
  display: flex;
  justify-content: space-between;
  gap: 33px;
  margin-top: 32px;
}

@media (max-width: 767px) {
  .howtouse__contents {
    flex-direction: column;
    margin-top: 24px;
    gap: 24px;
    height: 100%;
  }
}

.howtouse__contents-texts {
  max-width: 627px;
}

@media (max-width: 767px) {
  .howtouse__contents-texts {
    display: contents;
  }
}

.howtouse__contents-title {
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.67;
  font-feature-settings: "palt";
}

@media (max-width: 767px) {
  .howtouse__contents-title {
    font-size: 18px;
    text-align: center;
    font-feature-settings: unset;
    line-height: 1.9;
  }
}

.howtouse__contents-text {
  font-size: 20px;
  margin-top: 11px;
  text-align: left;
  line-height: 1.75;
}

@media (max-width: 767px) {
  .howtouse__contents-text {
    font-size: 16px;
    order: 1;
    margin-top: 0;
  }
}

.howtouse__contents-btn-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  margin-top: 30px;
  order: 2;
}

@media (max-width: 767px) {
  .howtouse__contents-btn-wrapper {
    flex-direction: column;
    gap: 13px;
    margin-top: 0;
  }
}

.howtouse__contents-btn {
  background-color: #e2e4fa;
  border-radius: 20px;
  width: 100%;
  transition: 0.3s;
}

.howtouse__contents-btn:hover {
  background-color: #1d2088;
  transition: 0.3s;
  text-decoration: none;
}

.howtouse__contents-btn a {
  display: inline-block;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 20px;
  padding: 10px 0px;
  border-radius: 10px;
  color: #1d2088;
  border-radius: 20px;
  width: 100%;
  transition: 0.3s;
}

.howtouse__contents-btn a:hover {
  color: #fff;
  transition: 0.3s;
  text-decoration: none;
}

@media (max-width: 767px) {
  .howtouse__contents-btn a {
    border-radius: 10px;
  }
}

.howtouse__contents-img {
  max-width: 440px;
}

@media (max-width: 767px) {
  .howtouse__contents-img {
    margin: auto;
  }
}

.howtouse__contents-img img {
  aspect-ratio: 440/ 360;
  object-fit: cover;
  width: 100%;
  border-radius: 20px;
}

/*============================================
WATER-REFILL
============================================*/


.water-refill-img {
  width: 85%;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .water-refill-img {
    width: 100%;
  }
}

.water-refill-img img {
  aspect-ratio: 4494/2690;
  object-fit: cover;
  height: auto;
  width: 100%;
}

@media (max-width: 767px) {
  .water-refill-img img {
    aspect-ratio: 1309/2830;
  }
}

/*============================================
REASON
============================================*/

.reason {}

.layout-reason {
  margin-top: 64px;
}

@media (max-width: 767px) {
  .layout-reason {
    margin-top: 50px;
  }
}

.reason__inner {}

.reason__notice {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: 500;
  color: #fc006e;
  text-align: center;
}

@media (max-width: 767px) {
  .reason__notice {
    line-height: 1.5;
  }
}

.reason__content {
  border: 2px solid #1d2088;
  padding-bottom: 124px;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 56px;
}

@media (max-width: 767px) {
  .reason__content {
    padding-bottom: 52px;
    margin-top: 26px;
  }
}

.reason__heading {
  display: flex;
}

@media (max-width: 767px) {
  .reason__heading {
    flex-direction: column;
  }
}

.reason__heading-img {
  max-width: 540px;
  width: 100%;
}

.reason__heading-img img {
  aspect-ratio: 2146/2000;
  object-fit: cover;
  height: auto;
  width: 100%;
}

.reason__heading-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 44px;
  font-weight: 500;
  color: #1d2088;
  line-height: 2;
  text-align: left;
  margin-top: 70px;
}

@media (max-width: 767px) {
  .reason__heading-text {
    font-size: 20px;
    text-align: center;
    margin-top: 0px;
  }
}

.reason__items {
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  display: grid;
  column-gap: 90px;
  row-gap: 80px;
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767px) {
  .reason__items {
    grid-template-columns: repeat(1, 1fr);
    margin-top: 40px;
    width: 88%;
    row-gap: 40px;
  }
}

.reason__item {}

.reason__item-number {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 120px;
  font-weight: 400;
  color: #1d2088;
  text-align: center;
  line-height: 1;
}

@media (max-width: 767px) {
  .reason__item-number {
    font-size: 60px;
  }
}

.reason__item-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 26px;
  font-weight: 500;
  color: #1d2088;
  text-align: center;
  margin-top: 24px;
}

@media (max-width: 767px) {
  .reason__item-title {
    margin-top: 40px;
    font-size: 18px;
  }
}

.reason__item-description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: #000;
  margin-top: 20px;
  text-align: left;
  line-height: 1.75;
}

@media (max-width: 767px) {
  .reason__item-description {
    font-size: 16px;
  }
}

/*============================================
PRODUCT-LIST
============================================*/

.product-list {
  padding: 51px 0;
  background-color: #e2e4fa;
}

.layout-product-top {
  margin-top: 95px;
}

@media (max-width: 767px) {
  .layout-product-top {
    margin-top: 56px;
  }
}

.product-list__items {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  /* アイテム間の余白 */
  justify-content: center;
  /* アイテムが1つのとき中央寄せ */
  margin-top: 37px;
}

@media (max-width: 767px) {
  .product-list__items {
    gap: 20px;
  }
}

.product-list__item {
  width: 340px;
  background-color: #fff;
  border-radius: 20px;
  border: 2px solid #1d2088;
  transition: 0.3s;
}

@media (max-width: 767px) {
  .product-list__item {
    max-width: 137px;
  }
}

.product-list__item:hover {
  background-color: #1d2088;
  border: 2px solid #1d2088;
  text-decoration: none;
  transition: 0.3s;
}

.product-list__item a {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #1d2088;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 160px;
  transition: 0.3s;
  border-radius: 20px;
}

@media (max-width: 767px) {
  .product-list__item a {
    font-size: 20px;
    padding: 21px 0;
    height: 80px;
  }
}

.product-list__item a:hover {
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

/*============================================
SHOP
============================================*/
.shop {}

.shop__inner {}

.layout-shop-sub-mv {
  margin-top: 80px;
}

@media (max-width: 768px) {
  .layout-shop-sub-mv {
    margin-top: 48px;
  }
}

.shop-sub-mv .sub-mv__item {
  width: 530px;
}

@media (max-width: 768px) {
  .shop-sub-mv .sub-mv__item {
    width: 100%;
  }
}

.shop-area.text-divider {
  padding: 0;
  background: none;
}

.factory-title {
  font-size: 20px;
  line-height: 150%;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: normal;
  margin-top: 50px;
  margin-right: 0px;
  margin-bottom: 30px;
  margin-left: 0px;
  border-left: 8px solid #969595;
  text-align: left;
  background-color: #dfdfdf;
  background-image: none;
}

@media (max-width: 768px) {
  .factory-title {
    font-size: 16px;
    margin-top: 20px;
  }
}

.shop-info {
  scroll-margin-top: 100px;
}

@media (max-width: 768px) {
  .shop-info {
    scroll-margin-top: 80px;
  }
}

@media (max-width: 768px) {
  .shop-info__title {
    max-width: 295px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
}

.shop-info__map {
  margin-top: 89px;
}

@media (max-width: 768px) {
  .shop-info__map {
    margin-top: 48px;
  }
}

.shopListBox.layout-shop-shopListBox {
  margin-top: 50px;
}

.shop__map {
  overflow-x: auto;
  /* 横スクロールを可能にする */
  white-space: nowrap;
  /* 改行させず横スクロール */
  width: 100%;
  /* 画面幅いっぱい */
  -ms-overflow-style: none;
  /* IE, Edgeでスクロールバーを非表示 */
  scrollbar-width: none;
  /* Firefoxでスクロールバーを非表示 */
}

.shop__map ::-webkit-scrollbar {
  display: none;
  /* Chrome, Safariでスクロールバーを非表示 */
}

.shop__map img {
  margin-right: auto;
  margin-left: auto;
  aspect-ratio: 1100/749;
  object-fit: cover;
  height: auto;
  display: block;
  width: 1100px;
}

.shop__content {}

.shop__title {}

.shop__attention {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: 500;
  color: #fc006e;
}

.shop__list,
.shop-content__list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  /* アイテム間の余白 */
  justify-content: center;
  /* アイテムが1つのとき中央寄せ */
  margin-top: 37px;
  align-items: center;
}

.shop__content .shop__title:nth-of-type(2),
.shop-content .shop-content__title:nth-of-type(2) {
  margin-top: 72px;
}

.shop__list-item,
.shop-content__item {
  background-color: #e2e4fa;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  border-radius: 10px;
  color: #1d2088;
  width: 137px;
  height: 80px;
}

.shop__list-item a,
.shop-content__item a {
  background-color: #e2e4fa;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  border-radius: 10px;
  color: #1d2088;
  width: 137px;
  height: 80px;
}

.shop__list-item.shop__list-item--area a,
.shop-content__item.shop-content__item--area a {
  background-color: #1d2088;
  color: #fff;
}

.shop__list-item.shop__list-item--delivery a,
.shop-content__item.shop-content__item--delivery a {
  width: 137px;
  border: 2px solid #1d2088;
  background-color: #fff;
}

.shop__btn {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  margin-top: 120px;
}

@media (max-width: 767px) {

  .shop__btn,
  .shop-content__btn {
    margin-top: 72px;
    font-size: 20px;
  }
}

.shop__btn a,
.shop-content__btn a {
  display: inline-block;
  width: 100%;
  padding: 24px 0;
  background-color: #fc006e;
  border-radius: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: 500;
  color: #fff;
  border: 2px solid transparent;
  transition: 0.3s;
  text-align: center;
}

.shop__btn a:hover,
.shop-content__btn a:hover {
  background-color: #fff;
  color: #fc006e;
  border: 2px solid #fc006e;
  transition: 0.3s;
  text-decoration: none;
}

@media (max-width: 767px) {

  .shop__btn a,
  .shop-content__btn a {
    padding: 14px 0;
    font-size: 20px;
    border-radius: 10px;
  }
}

.shop-factory {
  scroll-margin-top: 100px;
}

@media (max-width: 767px) {
  .shop-factory {
    scroll-margin-top: 80px;
    margin-top: 60px;
  }
}

@media (max-width: 767px) {
  .shop-factory__title {
    max-width: 295px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
}

@media (max-width: 768px) {
  .shop-factory__btn {
    max-width: 295px;
  }
}

.shop-factory__content {
  margin-top: 32px;
  margin-bottom: 50px;
}

@media (max-width: 767px) {
  .shop-factory__content {
    margin-bottom: 50px;
    max-width: 295px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
}

.shop-factory__delivery.layout-delivery {
  margin-top: 80px;
}

.center_wrapper {
  width: 95%;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 768px) {
  .center_wrapper {
    width: 100%;
  }
}

/*============================================
SHOP/PHP
============================================*/
.clearfix {
  display: block;
  min-height: 1%;
}

.clear {
  clear: both;
}

/* 外枠消す
    .blog_box {
      padding: 15px 20px;
      border: #00A3E1 3px solid;
    } */

.main_title {
  color: #00a3e1;
  font-weight: 600;
  text-align: center;
  font-size: 150%;
  margin: 10px 0;
}

.blog_box ul {
  text-align: left;
  margin: 0;
  padding: 0 0 10px;
  height: 200px;
  overflow-x: auto;
}

.blog_box ul li {
  list-style-type: none;
  padding: 10px 5px;
  border-bottom: solid 1px #ccc;
}

.blog_box ul .shop_box {
  padding-bottom: 8px;
}

.blog_box ul .shop_box .shop {
  display: inline-block;
  padding-right: 7px;
  margin: 5px 0 5px;
}

.blog_box ul .shop_box .shop a {
  display: inline-block;
  color: #fff;
  background: #00a1e9;
  padding: 2px 5px;
  font-size: 90%;
  border-radius: 3px;
  min-width: 10rem;
  text-align: center;
  line-height: 1.6em;
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
}

.blog_box ul .title {
  font-size: 120%;
  margin: 0;
  display: inline;
}

.blog_box ul .hiduke {
  display: inline-block;
  width: 160px;
}

.blog_box ul p.hiduke {
  margin: 0;
}

.blog_box ul .hiduke img {
  padding-left: 5px;
  vertical-align: middle;
}

.blog_box ul li .thum {
  width: 132px;
  float: left;
  margin: 0 15px 0 0;
}

.blog_box ul li .thum img {
  width: 100%;
}

@media screen and (max-width: 788px) {

  /*********SPに適用*********/
  .blog_box ul .shop_box .shop {
    margin: 5px 0 0px;
  }

  .blog_box ul .hiduke {
    display: block;
    width: 160px;
  }

  .blog_box ul p.blog_title {
    margin: 0 0;
  }
}

.shop-wrapper {
  display: flex;
  align-items: center;
}

.arrowbtn {
  position: relative;
}

.arrowbtn::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  display: inline-block;
  border-style: solid;
  border-width: 8px 0 8px 8px;
  border-color: transparent transparent transparent #000;
}

/*============================================
SUB-MV
============================================*/

.sub-mv {
  background-color: #e2e4fa;
  padding-bottom: 100px;
  padding-top: 100px;
}

@media (max-width: 768px) {
  .sub-mv {
    padding-top: 51px;
    padding-bottom: 64px;
  }
}

@media (max-width: 768px) {
  .layout-howtobuy-sub-mv {
    margin-top: 0;
  }
}

@media (min-width: 769px) {
  .mv__link {
    display: none;
  }
}

.sub-mv__sub-titte {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 300;
}

@media (max-width: 768px) {
  .sub-mv__sub-titte {
    font-size: 20px;
    margin-top: 11px;
  }
}

.sub-mv__contents {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  /* アイテム間の余白 */
  justify-content: center;
  /* アイテムが1つのとき中央寄せ */
  margin-top: 78px;
}

@media (max-width: 768px) {
  .sub-mv__contents {
    margin-top: 47px;
    gap: 22px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
}

.sub-mv__contents.sub-mv__contents--howtobuy {
  flex-wrap: nowrap;
}

.sub-mv__item {
  width: 340px;
  background-color: #fff;
  border: 2px solid #1d2088;
  border-radius: 20px;
  line-height: 1.5;
}

.sub-mv__item:hover {
  background-color: #1d2088;
  border: 2px solid #1d2088;
  text-decoration: none;
  transition: 0.3s;
}

@media (max-width: 768px) {
  .sub-mv__item {
    width: 100%;
    border-radius: 10px;
    font-size: 20px;
    line-height: 1.65;
    padding: 14px 0;
    border-radius: 10px;
  }
}

.sub-mv__item.sub-mv__item--howtobuy {
  width: 100%;
}

.sub-mv__item a {
  display: inline-block;
  color: #1d2088;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 500;
  padding: 56px 0;
  width: 100%;
  transition: 0.3s;
}

.sub-mv__item a:hover {
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

@media (max-width: 768px) {
  .sub-mv__item a {
    font-size: 20px;
    line-height: 1.65;
    padding: 14px 0;
  }
}

.sub-mv__item.sub-mv__item--howtobuy a {
  padding: 46px 0;
}

@media (max-width: 767px) {
  .sub-mv__item.sub-mv__item--howtobuy a {
    padding: 40px 0;
  }
}

.sub-mv__item-primary {
  color: #fc006e;
  font-size: 32px;
  transition: 0.3s;
}

.sub-mv__item a:hover .sub-mv__item-primary {
  color: #fff700;
  text-decoration: none;
  transition: 0.3s;
}

@media (max-width: 767px) {
  .sub-mv__item-primary {
    font-size: 24px;
  }
}

/*============================================
HOWTOBUY
============================================*/

.howtobuy {
  scroll-margin-top: 80px;
}

@media (max-width: 767px) {
  .howtobuy {
    scroll-margin-top: 40px;
  }
}

.howtobuy__title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  margin-top: 52px;
  scroll-margin-top: 120px;
}

@media (max-width: 767px) {
  .howtobuy__title {
    font-size: 18px;
    margin-top: 30px;
    scroll-margin-top: 56px;
  }
}

.howtobuy__sub-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  margin-top: 16px;
}

@media (max-width: 767px) {
  .howtobuy__sub-title {
    font-weight: 300;
  }
}

.howtobuy__price-list {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 80px;
  margin-top: 30px;
}

@media (max-width: 767px) {
  .howtobuy__price-list {
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }
}

.howtobuy__price-item {
  max-width: 245px;
  width: 100%;
}

@media (max-width: 767px) {
  .howtobuy__price-item {}
}

.howtobuy__price-item:not(:first-child) img {
  aspect-ratio: 177/210;
}

.howtobuy-delivery .howtobuy__price-item img {
  aspect-ratio: 177/210;
}

.howtobuy__price-item-img {
  /* margin-top: 20px; */
}

@media (max-width: 767px) {
  .howtobuy__price-item-img {}
}

.howtobuy__price-item-img img {
  object-fit: cover;
  height: auto;
  width: 100%;
}

@media (max-width: 767px) {
  .howtobuy__price-item-img img {}
}

.howtobuy__price-item-name {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  color: #1d2088;
  text-align: center;
  font-weight: 500;
}

@media (max-width: 767px) {
  .howtobuy__price-item-name {
    font-size: 16px;
  }
}

.howtobuy__price-item-price {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  color: #1d2088;
  text-align: center;
  font-weight: 500;
}

@media (max-width: 767px) {
  .howtobuy__price-item-price {}
}

.layout-shop-howtobuy {
  margin-top: 40px;
}

/*============================================
ステップ
============================================*/

.step {}

.layout-step {}

.step__inner {}

.step__title {}

.step__cards {
  display: grid;
  column-gap: 40px;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 32px;
}

@media (max-width: 767px) {
  .step__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 19.5px;
  }
}

.step__card {
  position: relative;
  counter-increment: step-counter;
  padding-top: 40px;
}

.step__card::before {
  content: counter(step-counter);
  position: absolute;
  top: 0;
  left: 50%;
  background: rgba(255, 255, 255, 0.8);
  color: #000;
  font-weight: bold;
  font-size: 24px;
  transform: translateX(-50%);
}

.step__card-img {
  border: 1px solid #000;
}

.step__card-img img {
  aspect-ratio: 245/245;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step__card-img {
  position: relative;
  width: 100%;
  padding-top: 100%;
  /* 4:3のアスペクト比を維持 */
  overflow: hidden;
}

.step__card-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step__card-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 300;
  text-align: left;
  margin-top: 16px;
}

@media (max-width: 767px) {
  .step__card-text {
    font-size: 16px;
  }
}

.howtobuy-delivery__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 60px;
}

@media (max-width: 767px) {
  .howtobuy-delivery__head {
    display: block;
  }
}

.howtobuy__price-list.howtobuy-delivery__head {
  display: flex;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 28px;
  font-weight: 500;
}

.howtobuy-delivery__head-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.7;
  text-align: left;
  margin-right: 70px;
}

@media (max-width: 767px) {
  .howtobuy-delivery__head-text {
    font-size: 18px;
    font-family: "Noto Sans JP", sans-serif;
    text-align: center;
    margin-top: 26px;
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .howtobuy-delivery__head-sub-text {
    font-size: 16px;
    margin-top: 34px;
  }
}

.howtobuy-delivery__btn {
  background-color: #e2e4fa;
  border-radius: 20px;
  width: 100%;
  transition: 0.3s;
  max-width: 304px;
  margin-left: auto;
  margin-top: 16px;
}

.howtobuy-delivery__btn a {
  display: inline-block;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 20px;
  padding: 10px 0px;
  border-radius: 10px;
  color: #1d2088;
  border-radius: 20px;
  width: 100%;
  transition: 0.3s;
}

/*============================================
HOWTOBUY-DELIVERY
============================================*/
.howtobuy-delivery {
  scroll-margin-top: 80px;
}

@media (max-width: 767px) {
  .howtobuy-delivery {
    scroll-margin-top: 40px;
  }
}

@media (min-width: 768px) {
  .howtobuy-delivery {
    font-size: 28px;
  }
}

.howtobuy-delivery__head-img {
  max-width: 443px;
  width: 100%;
  height: 305px;
}

.howtobuy-delivery__head-img img {
  aspect-ratio: 438/293;
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.howtobuy-delivery__wrapper,
.delivery {
  position: relative;
  border-radius: 20px;
  border: 2px solid #707070;
  padding-top: 29px;
  padding-bottom: 49px;
}

@media (max-width: 767px) {

  .howtobuy-delivery__wrapper,
  .delivery {
    border: none;
  }
}

.howtobuy-delivery__wrapper::after,
.delivery::after {
  position: absolute;
  content: "配達対象エリア";
  width: 360px;
  display: inline-block;
  background-color: #fff;
  top: -41px;
  left: 50%;
  color: #1d2088;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 40px;
  font-weight: 500;
  transform: translateX(-50%);
  text-align: center;
}

@media (max-width: 767px) {

  .howtobuy-delivery__wrapper::after,
  .delivery::after {
    display: none;
  }
}

.howtobuy-delivery__wrapper-inner,
.delivery__inner {
  width: 86.27%;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 767px) {

  .howtobuy-delivery__wrapper-inner,
  .delivery__inner {
    width: 100%;
  }
}

.howtobuy-delivery__map {}

.howtobuy-delivery__map img,
.delivery__map img {
  aspect-ratio: 949/698;
  object-fit: cover;
  height: auto;
  width: 100%;
}

.howtobuy-delivery__map-scale,
.delivery__map-scale {
  margin-top: 20px;
}

.howtobuy-delivery__map-scale img,
.delivery__map-scale img {
  aspect-ratio: 1100/830;
  object-fit: cover;
  height: auto;
  width: 100%;
}

.howtobuy-delivery__list-wrapper+.howtobuy-delivery__list-wrapper,
.delivery__list-wrapper+.delivery__list-wrapper {
  margin-top: 40px;
}

@media (max-width: 767px) {
  .howtobuy-delivery__list-wrapper+.howtobuy-delivery__list-wrapper {
    margin-top: 44px;
  }
}

.delivery-list__head,
.delivery__list-head {
  position: relative;
  padding: 15px 0;
  font-size: 16px;
  color: #fff;
  border: 1px solid #ccc;
  background-color: #58bcbe;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.delivery-list__head.delivery-list__head--urazoe,
.delivery__list-head.delivery__list-head--urazoe {
  background-color: #e580c2;
}

.delivery-list__head.delivery-list__head--nambu,
.delivery__list-head.delivery__list-head--nambu {
  background-color: #99abed;
}

@media (max-width: 767px) {

  .delivery-list__head,
  .delivery-list__head.delivery-list__head--urazoe,
  .delivery-list__head.delivery-list__head--nambu,
  .delivery__list-head,
  .delivery__list-head.delivery__list-head--urazoe,
  .delivery__list-head.delivery__list-head--nambu {
    background-color: transparent;
  }
}

.delivery-list__head-sp,
.delivery__list-head-sp {
  padding: 15px 0;
  border-radius: 10px 10px 0 0;
  background-color: #cfede9;
  margin-top: 35px;
  color: #000;
}

@media (max-width: 767px) {

  .delivery-list__head-sp,
  .delivery__list-head-sp {
    padding: 8px 0;
  }
}

@media (max-width: 767px) {

  .delivery-list__head-sp.delivery-list__head--urazoe,
  .delivery__list-head-sp.delivery__list-head--urazoe {
    background-color: #f2bfe0;
  }
}

@media (max-width: 767px) {

  .delivery-list__head-sp.delivery-list__head--nambu,
  .delivery__list-head-sp.delivery__list-head--nambu {
    background-color: #cdd5f7;
  }
}

.delivery-list__area,
.delivery__list-area {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: #fff;
}

@media (max-width: 767px) {

  .delivery-list__area,
  .delivery__list-area {
    font-size: 20px;
    padding: 12.5px 0;
    background-color: #58bcbe;
    border-radius: 10px;
  }
}

@media (max-width: 767px) {

  .delivery-list__area.delivery-list__area--urazoe,
  .delivery__list-area.delivery__list-area--urazoe {
    background-color: #e580c2;
  }
}

@media (max-width: 767px) {

  .delivery-list__area.delivery-list__area--nambu,
  .delivery__list-area.delivery__list-area--nambu {
    background-color: #99abed;
  }
}

@media (max-width: 767px) {

  .delivery-list__btn,
  .delivery__list-btn {
    margin-top: 20px;
  }
}

.delivery-list__btn a,
.delivery__list-btn a {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: #fff;
}

@media (max-width: 767px) {

  .delivery-list__btn a,
  .delivery__list-btn a {
    color: #fff;
    font-size: 32px;
    color: #1d2088;
  }
}

.price-list__data {
  padding: 10px 0;
  font-size: 12px;
  width: 20%;
  border: 1px solid #ccc;
}

.price-list__data span {
  margin-bottom: 5px;
  position: relative;
  display: block;
  text-decoration-line: line-through;
}

.delivery-list__items,
.delivery__items {
  display: grid;
  border-left: 1px solid #707070;
  grid-template-columns: repeat(5, 1fr);
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-out;
}

@media (max-width: 767px) {

  .delivery-list__items,
  .delivery__items {
    border-top: none;
    grid-template-columns: repeat(3, 1fr);
  }
}

.delivery-list__items .delivery-list__item.delivery-list__item--primary,
.delivery__items .delivery__item.delivery__item--primary {
  background-color: #cfede9;
}

@media (max-width: 767px) {

  .delivery-list__items .delivery-list__item.delivery-list__item--primary,
  .delivery__items .delivery__item.delivery__item--primary {
    color: #58bcbe;
    background-color: transparent;
  }
}

.delivery-list__items.delivery-list__items--urazoe .delivery-list__item.delivery-list__item--primary,
.delivery__items.delivery__items--urazoe .delivery__item.delivery__item--primary {
  background-color: #f2bfe0;
}

@media (max-width: 767px) {

  .delivery-list__items.delivery-list__items--urazoe .delivery-list__item.delivery-list__item--primary,
  .delivery__items.delivery__items--urazoe .delivery__item.delivery__item--primary {
    color: #e580c2;
    background-color: transparent;
  }
}

.delivery-list__items.delivery-list__items--nambu .delivery-list__item.delivery-list__item--primary,
.delivery__items.delivery__items--nambu .delivery__item.delivery__item--primary {
  background-color: #e2e4fa;
}

@media (max-width: 767px) {

  .delivery-list__items.delivery-list__items--nambu .delivery-list__item.delivery-list__item--primary,
  .delivery__items.delivery__items--nambu .delivery__item.delivery__item--primary {
    color: #99abed;
    background-color: transparent;
  }
}

.delivery-list__item,
.delivery__item {
  padding: 30px 0;
  border-right: 1px solid #707070;
  border-bottom: 1px solid #707070;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  color: #000;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {

  .delivery-list__item,
  .delivery__item {
    font-size: 14px;
    padding: 17px 0;
  }
}

@media (max-width: 767px) {

  .delivery-list__item.md-none,
  .delivery-__item.md-none {
    display: none;
  }
}

.delivery-list__area-sp,
.delivery__list-area-sp {
  position: relative;
  color: #000;
  font-size: 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}

.delivery-list__head::after,
.delivery__list-head::after {
  position: absolute;
  content: "";
  top: 39%;
  right: 20px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  display: inline-block;
  border-style: solid;
  border-width: 15px 8px 0 8px;
  border-color: #fff transparent transparent transparent;
  transform: rotate(180deg);
  transition: transform 0.3s;
}

.delivery-list__area-sp::after,
.delivery__list-area-sp::after {
  position: absolute;
  content: "";
  top: 25%;
  right: 20px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  display: inline-block;
  border-style: solid;
  border-width: 15px 8px 0 8px;
  border-color: #fff transparent transparent transparent;
  transform: rotate(180deg);
  transition: transform 0.3s;
}

.delivery-list__head.is-open,
.delivery-list__items.is-open,
.delivery__list-head.is-open,
.deliver__list-items.is-open {
  height: auto;
  border-top: 1px solid #707070;
}

@media (max-width: 767px) {

  .delivery-list__head.is-open,
  .delivery-list__items.is-open,
  .delivery__list-head.is-open,
  .delivery__list-items.is-open {
    height: auto;
    border-top: 1px solid #707070;
    border-bottom: 1px solid #707070;
  }
}

.delivery-list__head.is-open::after,
.delivery__list-head.is-open::after {
  transition: transform 0.3s;
  transform: rotate(360deg);
}

@media (max-width: 767px) {

  .delivery-list__head.is-open::after,
  .delivery-list__area-sp.is-open::after,
  .delivery__list-head.is-open::after,
  .delivery__list-area.is-open::after {
    transition: transform 0.3s;
    transform: rotate(360deg);
  }
}

/*============================================
COMMODITIES-MV
============================================*/

.commodities-mv.product-list .product-list__item a {
  height: 160px;
}

@media (max-width: 767px) {
  .commodities-mv.product-list .product-list__item a {
    height: 80px;
  }
}

.layout-shop {
  margin-top: 40px;
  padding-bottom: 80px;
}

/*============================================
WATER
============================================*/
.water {
  scroll-margin-top: 80px;
}

@media (max-width: 767px) {
  .water {
    padding-bottom: 40px;
    scroll-margin-top: 40px;
  }
}

.layout-water {
  margin-top: 90px;
}

@media (max-width: 767px) {
  .layout-water {
    margin-top: 59px;
  }
}

.water__title {
  font-feature-settings: "palt";
}

.water__contents {
  display: flex;
  justify-content: space-between;
  margin-top: 48px;
  gap: 20px;
}

@media (max-width: 767px) {
  .water__contents {
    flex-direction: column;
    margin-top: 24px;
    gap: 0px;
  }
}

.water__contents-item {
  max-width: 480px;
  width: 100%;
}

@media (max-width: 767px) {
  .water__contents-item {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .water__contents-item+.water__contents-item {
    border-top: 2px dashed #1d2088;
  }
}

@media (max-width: 767px) {
  .water__contents-item:not(:first-child) .water__contents-name {
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .water__contents-item:first-child {
    padding-bottom: 40px;
  }
}

.water__contents-item-wrap {}

@media (max-width: 767px) {
  .water__contents-item-wrap {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
}

.water__contents-img {}

@media (max-width: 767px) {
  .water__contents-img {
    margin-top: 30px;
  }
}

.water__contents-img img {
  aspect-ratio: 480/286;
  object-fit: cover;
  height: auto;
  border-radius: 20px;
  width: 100%;
}

@media (max-width: 767px) {
  .water__contents-img img {
    aspect-ratio: 295/168;
  }
}

.water__contents-name {
  color: #000;
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  margin-top: 10px;
  line-height: 1;
}

@media (max-width: 767px) {
  .water__contents-name {
    order: -1;
    margin-top: 0px;
  }
}

.water__contents-description {
  color: #000;
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  margin-top: 20px;
  text-align: left;
}

@media (max-width: 767px) {
  .water__contents-description {
    font-size: 16px;
  }
}

.water__contents-btn {
  max-width: 296px;
  width: 100%;
  background-color: #e2e4fa;
  margin-top: 30px;
  margin-right: auto;
  margin-left: auto;
  border-radius: 20px;
  transition: 0.3s;
}

.water__contents-btn:hover {
  background-color: #1d2088;
  transition: 0.3s;
  text-decoration: none;
}

@media (max-width: 767px) {
  .water__contents-btn {
    max-width: none;
    border-radius: 10px;
  }
}

.water__contents-btn a {
  display: inline-block;
  padding: 14px 0;
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #1d2088;
  transition: 0.3s;
}

.water__contents-btn:hover a {
  transition: 0.3s;
  text-decoration: none;
  color: #fff;
}

@media (max-width: 767px) {
  .water__contents-btn a {}
}

/*============================================
ALCOHOL
============================================*/

.alcohol {
  scroll-margin-top: 80px;
}

@media (max-width: 767px) {
  .alcohol {
    padding-bottom: 40px;
    scroll-margin-top: 40px;
  }
}

.layout-alcohol {
  margin-top: 116px;
}

@media (max-width: 767px) {
  .layout-alcohol {
    margin-top: 40px;
  }
}

.alcohol__contents {
  margin-top: 44px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

@media (max-width: 767px) {
  .alcohol__contents {
    display: block;
  }
}

.alcohol__contents-img {
  max-width: 480px;
  width: 100%;
}

@media (max-width: 767px) {
  .alcohol__contents-img {
    max-width: none;
  }
}

.alcohol__contents-img img {
  border-radius: 20px;
  aspect-ratio: 344/285;
  object-fit: cover;
  width: 100%;
}

.alcohol__contents--texts {
  max-width: 570px;
  width: 100%;
}

.alcohol__list {
  margin-top: 56px;
  /* display: grid; */
  /* grid-template-columns: repeat(4, 1fr); */
  display: flex;
  align-items: flex-end;
  row-gap: 30px;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .alcohol__list {
    margin-top: 53px;
  }
}

.alcohol__item {}

@media (max-width: 767px) {
  .alcohol__item {
    max-width: 138px;
    width: 100%;
  }
}

.alcohol__item-img {}

@media (max-width: 767px) {
  .alcohol__item-img {}
}

.alcohol__item-img img {
  object-fit: cover;
}

@media (max-width: 767px) {
  .alcohol__item-img img {}
}

.alcohol__item-name {
  color: #000;
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #1d2088;
  line-height: 1;
  margin-top: 39px;
}

@media (max-width: 767px) {
  .alcohol__item-name {
    font-size: 16px;
    margin-top: 10px;
  }
}

.alcohol__description {
  color: #000;
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  text-align: left;
}

@media (max-width: 767px) {
  .alcohol__description {
    margin-top: 20px;
    line-height: 1.5;
    font-size: 16px;
    width: 100%;
  }
}

.alcohol__price {
  color: #1d2088;
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
}

.alcohol__price:first-child {
  margin-top: 20px;
}

@media (max-width: 767px) {
  .alcohol__price {
    font-size: 16px;
    width: 100%;
  }

  .alcohol__price:first-child {
    margin-top: 15px;
  }
}

.alcohol__price+.alcohol__price {
  margin-top: 10px;
}

@media (max-width: 767px) {
  .alcohol__price {
    font-size: 16px;
    width: 100%;
  }
}

.alcohol__btn {
  max-width: 377px;
  width: 100%;
  background-color: #e2e4fa;
  margin-top: 30px;
  border-radius: 20px;
  margin-right: auto;
  transition: 0.3s;
}

.alcohol__btn:hover {
  background-color: #1e2088;
  transition: 0.3s;
  text-decoration: none;
}

@media (max-width: 767px) {
  .alcohol__btn {
    margin-left: auto;
    max-width: none;
    border-radius: 10px;
  }
}

.alcohol__btn a {
  width: 100%;
  padding: 14px 0;
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #1d2088;
  display: inline-block;
  transition: 0.3s;
  text-decoration: none;
}

.alcohol__btn:hover a {
  color: #fff;
  transition: 0.3s;
}

@media (max-width: 767px) {
  .alcohol__btn a {}
}

/*============================================
SODA
============================================*/

.soda {
  scroll-margin-top: 80px;
}

@media (max-width: 767px) {
  .soda {
    padding-bottom: 40px;
    scroll-margin-top: 40px;
  }
}

.layout-soda {
  margin-top: 116px;
}

@media (max-width: 767px) {
  .layout-soda {
    margin-top: 40px;
  }
}

.soda__contents {
  display: flex;
  justify-content: space-between;
  margin-top: 44px;
  gap: 20px;
}

@media (max-width: 767px) {
  .soda__contents {
    margin-top: 24px;
    flex-direction: column;
    gap: 0px;
  }
}

.soda__contents-img {
  max-width: 480px;
  width: 100%;
}

@media (max-width: 767px) {
  .soda__contents-img {
    max-width: none;
  }
}

.soda__contents-img img {
  border-radius: 20px;
  aspect-ratio: 480/285;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 767px) {
  .soda__contents-img img {
    aspect-ratio: 295/168;
  }
}

.soda__contents-texts {
  max-width: 570px;
  width: 100%;
}

@media (max-width: 767px) {
  .soda__contents-texts {
    margin-top: 10px;
    max-width: none;
  }
}

.soda__text {
  color: #000;
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  line-height: 1.5;
  text-align: left;
}

@media (max-width: 767px) {
  .soda__text {
    line-height: 1.5;
    font-size: 16px;
    line-height: 1.5;
  }
}

.soda__price {
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #1d2088;
  line-height: 1.5;
  margin-top: 10px;
  text-align: left;
}

@media (max-width: 767px) {
  .soda__price {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 10px;
  }
}

html {
  scroll-behavior: smooth;
}

.soda__btn {
  max-width: 377px;
  width: 100%;
  background-color: #e2e4fa;
  margin-top: 30px;
  border-radius: 20px;
  margin-right: auto;
  transition: 0.3s;
}

.soda__btn:hover {
  background-color: #1d2088;
  transition: 0.3s;
  text-decoration: none;
}

@media (max-width: 767px) {
  .soda__btn {
    max-width: none;
  }
}

.soda__btn a {
  width: 100%;
  padding: 14px 0;
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #1d2088;
  display: inline-block;
  text-decoration: none;
  transition: 0.3s;
}

.soda__btn:hover a {
  color: #fff;
  transition: 0.3s;
  text-decoration: none;
}

@media (max-width: 767px) {
  .soda__btn a {}
}

/*============================================
BOTTOLE
============================================*/

.bottle {
  scroll-margin-top: 80px;
}

@media (max-width: 767px) {
  .bottle {
    scroll-margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .md-underline {
    padding-bottom: 40px;
    position: relative;
    scroll-margin-top: 60px;
  }
}

@media (max-width: 767px) {
  .md-underline::after {
    position: absolute;
    content: "";
    display: block;
    width: 80%;
    border-bottom: 2px solid #1d2088;
    bottom: 0;
    margin-right: auto;
    margin-left: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

.layout-bottle {
  margin-top: 116px;
}

@media (max-width: 767px) {
  .layout-bottle {
    margin-top: 40px;
  }
}

.bottle__list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px 74px;
  margin-top: 40px;
}

@media (max-width: 767px) {
  .bottle__list {
    gap: 10px 10px;
  }
}

.bottole__item {}

@media (max-width: 767px) {
  .bottole__item {
    width: 138px;
  }
}

@media (max-width: 767px) {
  .bottole__item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.bottole__item:nth-child(1) {
  display: flex;
  gap: 142px;
  padding: 0 50px;
}

@media (max-width: 767px) {
  .bottole__item:nth-child(1) {
    gap: 16px;
    width: 100%;
    flex-direction: row;
    padding: 0;
  }
}

.bottle__item-img {}

@media (max-width: 767px) {
  .bottle__item-img {}
}

.bottle__item-img img {
  object-fit: cover;
  height: auto;
}

@media (max-width: 767px) {
  .bottle__item-img img {}
}

.bottle__item-name {
  color: #1d2088;
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1.5;
}

@media (max-width: 767px) {
  .bottle__item-name {
    font-size: 16px;
    line-height: 1.5;
  }
}

/*============================================
SERVER
============================================*/

.server {
  scroll-margin-top: 80px;
}

@media (max-width: 767px) {
  .server {
    padding-bottom: 40px;
    scroll-margin-top: 40px;
  }
}

.layout-server {
  margin-top: 120px;
}

.server__list {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 40px 140px;
  margin-top: 96px;
}

@media (max-width: 767px) {
  .server__list {
    gap: 40px 0px;
    flex-direction: column;
    margin-top: 53px;
    align-items: center;
  }
}

.server__item {
  max-width: 480px;
  width: 100%;
}

@media (max-width: 767px) {
  .server__item {}
}

.server__item {}

@media (max-width: 767px) {
  .server__item:not(:last-child) {
    padding-bottom: 37px;
    border-bottom: 2px dashed #1d2088;
  }
}

.server__item-img {}

@media (max-width: 767px) {
  .server__item-img {}
}

.server__item-img img {
  aspect-ratio: 252/365;
  object-fit: cover;
  height: auto;
  width: 252px;
}

@media (max-width: 767px) {
  .server__item-img img {
    width: 187px;
  }
}

.server__item:nth-child(2) img {
  aspect-ratio: 240/198;
  width: 240px;
}

@media (max-width: 767px) {
  .server__item:nth-child(2) img {
    width: 148px;
  }
}

.server__item-name {
  color: #000;
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  margin-top: 10px;
  line-height: 1.5;
}

@media (max-width: 767px) {
  .server__item-name {
    font-size: 16px;
    margin-top: 10px;
    line-height: 1.5;
  }
}

.server__item-description {
  color: #000;
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  margin-top: 10px;
  line-height: 1.5;
  text-align: left;
}

@media (max-width: 767px) {
  .server__item-description {
    font-size: 16px;
    margin-top: 10px;
    line-height: 1.5;
  }
}

.server__item-price {
  color: #1d2088;
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  margin-top: 10px;
  line-height: 1.5;
  text-align: left;
}

@media (max-width: 767px) {
  .server__item-price {
    font-size: 16px;
    margin-top: 10px;
    line-height: 1.5;
  }
}

.commodities-shop .shop__map {
  margin-top: 72px;
}

/*============================================
SHOP.HTML
============================================*/

@media (max-width: 767px) {
  .inner.shop-inner {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.center_scroll {
  scroll-margin-top: 90px;
}

@media (max-width: 768px) {
  .center_scroll {
    scroll-margin-top: 50px;
  }
}

/*============================================
Q&A.HTML
============================================*/
.wd100 {
  width: 100%;
}

@media (max-width: 768px) {
  .qa-shop {
    padding-top: 50px;
    position: relative;
  }
}

@media (max-width: 768px) {
  .qa-shop::after {
    content: "";
    width: 95%;
    height: 2px;
    display: inline-block;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    background-color: #1e2088;
  }
}

.layout-qa-shop {
  margin-top: 90px;
}

@media (max-width: 768px) {
  .layout-qa-shop {
    margin-top: 30px;
  }
}

.qa-shop .shop__inner.inner {
  padding-left: 8px;
  padding-right: 8px;
}

/*============================================
WATER.HTML
============================================*/

.scroll-hint-icon.scroll-hint-icon-blue {
  background-color: #1e2088;
}

.natural-water,
.alkali-ion-water {
  scroll-margin-top: 90px;
}

@media (max-width: 768px) {

  .natural-water,
  .alkali-ion-water {
    scroll-margin-top: 60px;
  }
}

.layout-water-heading {
  margin-top: 160px;
}

@media (max-width: 768px) {
  .layout-water-heading {
    margin-top: 40px;
  }
}

.water-heading__title {
  text-align: center;
  font-size: 40px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1.5;
  color: #1d2088;
}

@media (max-width: 767px) {
  .water-heading__title {
    font-size: 20px;
  }
}

.layout-water-taste {
  margin-top: 60px;
}

@media (max-width: 767px) {
  .layout-water-taste {
    margin-top: 46px;
  }
}

.water-taste.taste .taste__item-img img {
  aspect-ratio: 1440/2411;
  object-fit: cover;
  height: auto;
  width: 100%;
}

@media (max-width: 768px) {
  .water-taste.taste .taste__item-img img {
    aspect-ratio: 375/2284;
  }
}

.layout-structure {
  margin-top: 91px;
}

/* .structure__title.section-title,
.ingredients__title.section-title {
  padding-top: 10px 40px;
} */

@media (max-width: 767px) {

  .structure__title.section-title,
  .ingredients__title.section-title {
    padding: 10px 20px;
    font-size: 18px;
  }
}

.structure__text {
  text-align: left;
  font-size: 28px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1.5;
  margin-top: 36px;
}

@media (max-width: 768px) {
  .structure__text {
    font-size: 18px;
  }
}

.structure__content {
  margin-top: 36px;
}

.structure__img {
  margin-top: 36px;
}

@media (max-width: 768px) {
  .structure__img {
    margin-top: 0px;
  }
}

.structure__img+.structure__img {
  margin-top: 96px;
  position: relative;
}

.structure__img+.structure__img::after {
  position: absolute;
  content: "";
  width: 80%;
  height: 2px;
  display: inline-block;
  background-color: #1e2088;
  top: -48px;
  left: 50%;
  transform: translateX(-50%);
}

.structure__img img {
  aspect-ratio: 1100/651;
  object-fit: cover;
  height: auto;
  width: 100%;
}

@media (max-width: 767px) {
  .structure__img img {
    aspect-ratio: 375/509;
  }
}

.layout-ingredients {
  margin-top: 137px;
}

@media (max-width: 768px) {
  .layout-ingredients {
    margin-top: 100px;
  }
}

.ingredients__contents {
  display: flex;
  justify-content: space-between;
  margin-top: 36px;
}

@media (max-width: 768px) {
  .ingredients__contents {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
}

.ingredients__text {
  text-align: left;
  font-size: 28px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .ingredients__text {
    font-size: 18px;
  }
}

.ingredients__icon-img {
  max-width: 217px;
  width: 100%;
}

.ingredients__icon-img img {
  aspect-ratio: 217/269;
  object-fit: cover;
  height: auto;
  width: 100%;
  display: block;
}

.ingredients__table-img {}

@media (max-width: 768px) {
  .ingredients__table-img {
    overflow-x: scroll;
    /* margin-right: calc(50% - 50vw); */
  }
}

@media (max-width: 768px) {
  .ingredients__table-img::-webkit-scrollbar {
    display: none;
  }
}

.ingredients__table-img img {
  aspect-ratio: 1100/257;
  object-fit: cover;
  height: auto;
  width: 100%;
}

@media (max-width: 768px) {
  .ingredients__table-img img {
    aspect-ratio: 1029/240;
    max-width: none;
    width: 1028px;
  }
}

.layout-water-shop {
  margin-top: 160px;
}

@media (max-width: 767px) {
  .layout-water-shop {
    margin-top: 76px;
    position: relative;
  }
}

@media (max-width: 767px) {
  .layout-water-shop::after {
    position: absolute;
    content: "";
    width: 80%;
    height: 2px;
    display: inline-block;
    background-color: #1e2088;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 767px) {
  .water-shop {
    margin-top: 76px;
    padding-top: 48px;
  }
}

/*============================================
INQUIRY
============================================*/

.layout-inquiry-shop {
  margin-top: 124px;
  scroll-margin-top: 120px;
}

@media (max-width: 768px) {
  .layout-inquiry-shop {
    margin-top: 64px;
    scroll-margin-top: 80px;
  }
}

@media (max-width: 768px) {
  .inquiry-shop__map-inner {
    padding-bottom: 29px;
    position: relative;
  }
}

@media (max-width: 768px) {
  .md-underline::after {
    position: absolute;
    content: "";
    display: block;
    width: 80%;
    border-bottom: 2px solid #1d2088;
    bottom: 0;
    margin-right: auto;
    margin-left: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

.inquiry-shop__text {
  font-size: 28px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .inquiry-shop__text {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    margin-top: 20px;
  }
}

.inquiry-shop__title {
  margin-top: 40px;
}

.inquiry-shop__map {
  margin-top: 40px;
}

@media (max-width: 768px) {
  .inquiry-shop__map {
    margin-top: 20px;
  }
}

.inquiry-delivery__text {
  font-size: 28px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  line-height: 1.5;
  margin-top: 40px;
  text-align: left;
}

@media (max-width: 768px) {
  .inquiry-delivery__text {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    margin-top: 20px;
  }
}

@media (max-width: 768px) {
  .inquiry-delivery__title.section-title {
    padding: 11px 28px;
  }
}

.layout-inquiry-delivery {
  margin-top: 124px;
  scroll-margin-top: 120px;
}

@media (max-width: 768px) {
  .layout-inquiry-delivery {
    margin-top: 64px;
    scroll-margin-top: 80px;
  }
}

.inquiry-shop .shop__map img {
  margin-right: auto;
  margin-left: auto;
  aspect-ratio: 1100/749;
  object-fit: cover;
  height: auto;
  display: block;
  width: 1100px;
}

.inquiry-delivery .howtobuy-delivery__wrapper {
  margin-top: 40px;
}

@media (max-width: 768px) {
  .inquiry-delivery .howtobuy-delivery__wrapper {
    margin-top: 10px;
    padding-bottom: 0;
  }
}

.inquiry-delivery .howtobuy-delivery__wrapper::after {
  top: -39px;
}

/*============================================
privacy
============================================*/

.mainimg2nd01__title {
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 20px;
  color: #262626;
  font-weight: bold;
  text-align: center;
}

.mainimg2nd02__title {
  text-align: center;
}

/*============================================
LP
============================================*/
@media (max-width: 768px) {
  .header.lp-header {
    display: block;
    top: 0;
  }
}

@media (max-width: 768px) {
  .header.lp-header .header__inner {
    margin-right: 10px;
    margin-left: 10px;
  }
}

@media (max-width: 768px) {
  .header.lp-header .header__logo {
    max-width: 110px;
  }
}

@media (max-width: 768px) {
  .header.lp-header .header__text {
    display: none;
  }
}

@media (max-width: 768px) {
  .header.lp-header .header__logo {
    display: block;
    width: 45%;
    margin-left: 12px;
  }
}

@media (max-width: 768px) {
  .header.lp-header .header__logo a {
    display: inline-block;
    height: inherit;
  }
}

@media (max-width: 768px) {
  .header.lp-header .header__nav {
    display: block;
  }
}

@media (max-width: 768px) {
  .header.lp-header .header__nav-item.header__nav-item--contact {
    position: relative;
  }
}

@media (max-width: 768px) {
  .header.lp-header .header__nav-item.header__nav-item--contact::after {
    position: absolute;
    content: "";
    clip-path: polygon(100% 0, 0 0, 50% 100%);
    display: inline-block;
    width: 10px;
    height: 10px;
    right: 6px;
    top: 55%;
    transform: translateX(-50%);
    background: #fff;
  }
}

@media (max-width: 768px) {
  .header.lp-header .header__nav-item.header__nav-item--contact a {
    font-size: 12px;
    padding: 2px 24px 2px 12px;
    line-height: 1.2;
  }
}

.header__text {
  height: inherit;
  font-size: 24px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #1d2088;
  display: flex;
  align-items: center;
  margin-left: 30px;
}

@media (max-width: 1200px) {
  .header__text {
    font-size: 16px;
    margin-left: 24px;
  }
}

@media (max-width: 768px) {
  .header__text {
    display: none;
  }
}

.header__text-row {
  display: none;
}

@media (max-width: 1200px) {
  .header__text-row {
    display: block;
  }
}

.lp-mv {
  /* height: 100vh; */
  min-height: 400px;
}

.layout-lp-mv {
  margin-top: 80px;
}

@media (max-width: 768px) {
  .layout-lp-mv {
    margin-top: 48px;
  }
}

.lp-mv__inner {
  height: inherit;
  min-height: inherit;
}

.lp-mv__img {
  height: inherit;
  min-height: inherit;
}

.lp-mv__img img {
  aspect-ratio: 1500/687;
  object-fit: cover;
  width: 100%;
  height: inherit;
  /* display: inline-block; */
}

@media (max-width: 768px) {
  .lp-mv__img img {
    aspect-ratio: 375/494;
  }
}

.lp-inner {
  margin-right: auto;
  margin-left: auto;
  padding-left: 25px;
  padding-right: 25px;
  max-width: 1050px;
}

@media (max-width: 767px) {
  .lp-inner {
    max-width: 600px;
    padding-left: 40px;
    padding-right: 40px;
  }
}

.campaign {}

.layout-campaign {
  margin-top: 82px;
}

@media (max-width: 767px) {
  .layout-campaign {
    margin-top: 64px;
  }
}

.campaign__title-img {}

.campaign__title-img img {
  aspect-ratio: 1000/88;
  object-fit: cover;
  height: auto;
  width: 100%;
}

@media (max-width: 767px) {
  .campaign__title-img img {
    aspect-ratio: 295/62;
  }
}

.campaign__list {
  display: flex;
  gap: 28px;
  margin-top: 26px;
  justify-content: center;
}

@media (max-width: 767px) {
  .campaign__list {
    flex-direction: column;
    gap: 27px;
  }
}

.campaign__item {}

.campaign__item-img {}

.campaign__item-img img {
  aspect-ratio: 486/465;
  object-fit: cover;
  height: auto;
  width: 100%;
}

@media (max-width: 767px) {
  .campaign__item-img img {
    aspect-ratio: 295/292;
  }
}

@media (max-width: 767px) {
  .campaign__list .campaign__item:nth-child(2) campaign__item-img img {
    aspect-ratio: 295/380;
  }

  .campaign__list .campaign__item:nth-child(2) picture>img {
    aspect-ratio: 295/380;
  }
}

.campaign__period {
  margin-top: 60px;
}

@media (max-width: 767px) {
  .campaign__period {
    margin-top: 24px;
  }
}

.lp-period {
  border: 1px solid #1d2088;
  border-radius: 20px;
  font-size: 30px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #1d2088;
  padding: 20px 0px;
}

@media (max-width: 767px) {
  .lp-period {
    font-size: 17px;
    padding: 15px 0px;
  }
}

.campaign__btn {
  margin-top: 56px;
}

@media (max-width: 767px) {
  .campaign__btn {
    margin-top: 24px;
  }
}

.lp-btn {}

.lp-btn a {
  padding: 8px 64px;
  background-color: #fc006e;
  font-size: 45px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  display: inline-block;
  color: #fff;
  border-radius: 20px;
  text-decoration: none;
  transition: 0.3s;
  border: 2px solid #fc006e;
}

@media (max-width: 767px) {
  .lp-btn a {
    padding: 6px 0px;
    font-size: 17px;
    width: 100%;
    border-radius: 16px;
  }
}

.lp-btn a:hover {
  color: #fc006e;
  background-color: #fff;
  transition: 0.3s;
  text-decoration: none;
}

.worry {}

.layout-worry {
  margin-top: 87px;
}

@media (max-width: 767px) {
  .layout-worry {
    margin-top: 40px;
  }
}

.worry img {
  width: 100%;
}

.layout-price-info {
  margin-top: 158px;
}

@media (max-width: 767px) {
  .layout-price-info {
    margin-top: 30px;
  }
}

.price-info__img img {
  aspect-ratio: 1000/440;
  object-fit: cover;
  height: auto;
  width: 100%;
}

@media (max-width: 767px) {
  .price-info__img img {
    aspect-ratio: 257/209;
  }
}

.lp-price {}

.layout-lp-price {
  margin-top: 122px;
}

@media (max-width: 767px) {
  .layout-lp-price {
    margin-top: 45px;
  }
}

.lp-price__inner {}

.lp-price__img {}

.lp-price__img img {
  aspect-ratio: 947/582;
  object-fit: cover;
  height: auto;
  width: 100%;
}

@media (max-width: 767px) {
  .lp-price__img img {
    aspect-ratio: 295/566;
  }
}

.lp-title {
  font-size: 50px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #1e2088;
  text-align: center;
  line-height: 1.5;
  padding: 0;
}

@media (max-width: 767px) {
  .lp-title {
    font-size: 22px;
  }
}

.comparison {
  padding-top: 36px;
}

@media (max-width: 767px) {
  .comparison {
    padding-top: 40px;
  }
}

.layout-comparison {
  margin-top: 120px;
  position: relative;
}

.layout-comparison::before {
  content: "";
  position: absolute;
  height: 1px;
  top: 0;
  left: 50%;
  width: 73%;
  transform: translateX(-50%);
  display: inline-block;
  background-color: #1d2088;
}

@media (max-width: 767px) {
  .layout-comparison {
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .layout-comparison::before {
    width: 80%;
  }
}

.comparison__title {}

.comparison__caution {
  font-size: 18px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #1e2088;
  text-align: right;
  margin-top: 17px;
  line-height: 1;
}

@media (max-width: 767px) {
  .comparison__caution {
    font-size: 12px;
    font-weight: 300;
  }
}

.comparison__btn {
  margin-top: 61px;
}

@media (max-width: 767px) {
  .comparison__btn {
    margin-top: 10px;
  }
}

/*============================================
USAGE
============================================*/

.usage {
  padding-top: 90px;
}

@media (max-width: 767px) {
  .usage {
    padding-top: 40px;
  }
}

.layout-usage {
  margin-top: 90px;
  position: relative;
}

.layout-usage::before {
  content: "";
  position: absolute;
  height: 1px;
  top: 0;
  left: 50%;
  width: 73%;
  transform: translateX(-50%);
  display: inline-block;
  background-color: #1d2088;
}

@media (max-width: 767px) {
  .layout-usage {
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .layout-usage::before {
    width: 80%;
  }
}

.usage__heading-img {}

.usage__heading-img img {}

.usage__caution {
  font-size: 18px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #1e2088;
  text-align: right;
  line-height: 1;
}

@media (max-width: 767px) {
  .usage__caution {
    font-size: 12px;
    font-weight: 300;
  }
}

.usage__img img {
  aspect-ratio: 1000/556;
  object-fit: cover;
  height: auto;
  width: 100%;
}

@media (max-width: 767px) {
  .usage__img img {
    aspect-ratio: 297/614;
  }
}

.usage__list {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .usage__list {
    gap: 24px 0px;
    margin-top: 4px;
  }
}

.usage__item {
  padding: 0 40px;
  border-left: 1px #1d2088 dashed;
}

@media (max-width: 767px) {
  .usage__item {
    padding: 0 20px;
  }
}

@media (max-width: 1024px) {
  .usage__item:nth-child(2) {
    border-right: none;
  }
}

@media (max-width: 983px) {
  .usage__item:nth-child(2) {
    border-right: 1px #1d2088 dashed;
  }
}

@media (max-width: 767px) {
  .usage__item:nth-child(2) {
    border-right: none;
  }
}

@media (max-width: 505px) {
  .usage__item:nth-child(2) {
    border-right: 1px #1d2088 dashed;
  }
}

.usage__item:last-child {
  border-right: 1px #1d2088 dashed;
}

.usage__item-title {
  font-size: 30px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1;
  color: #1d2088;
}

@media (max-width: 767px) {
  .usage__item-title {
    font-size: 22px;
  }
}

.usage__item-img {
  margin-top: 33px;
}

.usage__item-amount {
  margin-top: 55px;
  font-size: 25px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1;
  color: #1d2088;
}

@media (max-width: 767px) {
  .usage__item-amount {
    font-size: 17px;
  }
}

.usage__item-price-box {
  background-color: #fff700;
  padding: 14px 60px;
  border-radius: 20px;
  margin-top: 16px;
}

@media (max-width: 767px) {
  .usage__item-price-box {
    padding: 15px 10px;
  }
}

.usage__item-price-label {
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1;
  color: #1d2088;
}

@media (max-width: 767px) {
  .usage__item-price-label {
    font-size: 17px;
  }
}

.usage__item-price {
  margin-top: 10px;
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1;
  color: #1d2088;
}

@media (max-width: 767px) {
  .usage__item-price {
    font-size: 22px;
  }
}

.usage__item-price span {
  font-size: 40px;
}

@media (max-width: 767px) {
  .usage__item-price span {
    font-size: 22px;
  }
}

/*============================================
RECOMMEND
============================================*/

.recommend {
  padding-top: 90px;
}

@media (max-width: 767px) {
  .recommend {
    padding-top: 40px;
  }
}

.layout-recomend {
  margin-top: 130px;
  position: relative;
}

.layout-recomend::before {
  content: "";
  top: 0;
  display: inline-block;
  left: 50%;
  height: 1px;
  width: 73%;
  transform: translateX(-50%);
  position: absolute;
  background-color: #1d2088;
}

@media (max-width: 767px) {
  .layout-recomend {
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .layout-recomend::before {
    width: 80%;
  }
}

.recommend__title {}

.recommend__list {
  display: flex;
  gap: 30px;
  margin-top: 50px;
}

@media (max-width: 767px) {
  .recommend__list {
    margin-top: 47px;
    flex-direction: column;
    gap: 27px;
  }
}

.recommend__item {
  width: calc((100% - 60px) / 3);
}

@media (max-width: 767px) {
  .recommend__item {
    width: 100%;
  }
}

.recommend__label {
  font-size: 30px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1;
  color: #1d2088;
  text-align: center;
}

@media (max-width: 767px) {
  .recommend__label {
    font-size: 22px;
  }
}

.recommend__item-img {
  width: 100%;
  margin-top: 20px;
}

.recommend__item-img img {
  aspect-ratio: 313/278;
  object-fit: cover;
  width: 100%;
  height: auto;
  border-radius: 30px;
}

@media (max-width: 767px) {
  .recommend__item-img img {
    aspect-ratio: 295/180;
  }
}

.recommend__text {
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1.5;
  color: #1d2088;
  text-align: left;
}

@media (max-width: 767px) {
  .recommend__text {
    font-size: 17px;
  }
}

.recommend__text span {
  color: #fc006e;
}

.recommend__highlight {}

.comparison__img {
  margin-top: 14px;
}

.comparison__img img {
  aspect-ratio: 1000/642;
  object-fit: cover;
  height: auto;
  width: 100%;
}

@media (max-width: 767px) {
  .comparison__img img {
    aspect-ratio: 292/193;
  }
}

.campaign__img img {
  aspect-ratio: 1000/500;
  object-fit: cover;
  height: auto;
  width: 100%;
}

@media (max-width: 767px) {
  .campaign__img img {
    aspect-ratio: 258/296;
  }
}

/*============================================
TASTE
============================================*/
.taste {
  position: relative;
}

.layout-taste {
  margin-top: 134px;
}

@media (max-width: 767px) {
  .layout-taste {
    margin-top: 69px;
  }
}

.taste__inner {}

.lp-inner {}

.taste__item-img {}

/* .taste__item-img img {
  aspect-ratio: 1440/2406;
  object-fit: cover;
  height: auto;
  width: 100%;
}

@media (max-width: 767px) {
  .taste__item-img img {
    aspect-ratio: 375/2284;
  }
} */

.taste__item-img img {
  aspect-ratio: 1440/2411;
  object-fit: cover;
  height: auto;
  width: 100%;
}

@media (max-width: 767px) {
  .taste__item-img img {
    aspect-ratio: 375/2284;
  }
}

.taste__head {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
}

.taste__title {
  font-size: 30px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1.5;
  color: #1d2088;
}

.taste__text {
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  line-height: 1.5;
}

.taste__text span {
  font-weight: 500;
  color: #e60012;
}

/*============================================
LP-SERVER
============================================*/

.lp-server {
  padding-top: 86px;
}

@media (max-width: 767px) {
  .lp-server {
    padding-top: 48px;
  }
}

.layout-lp-server {
  margin-top: 83px;
  position: relative;
}

.layout-lp-server::before {
  content: "";
  position: absolute;
  height: 1px;
  top: 0;
  left: 50%;
  width: 73%;
  transform: translateX(-50%);
  display: inline-block;
  background-color: #1d2088;
}

@media (max-width: 767px) {
  .layout-lp-server {
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .layout-lp-server::before {
    width: 80%;
  }
}

.layout-lp-server .lp-title {}

.lp-server__title {}

.lp-server__inner .lp-title {
  /* margin-top: 40px; */
}

.lp-server__title span {
  color: #fc006e;
}

.lp-server__img {
  margin-top: 49px;
}

@media (max-width: 767px) {
  .lp-server__img {
    margin-top: 21px;
  }
}

.lp-server__img img {
  aspect-ratio: 1000/676;
  object-fit: cover;
  height: auto;
  width: 100%;
}

.howtobuy-delivery.howtobuy-delivery--lp {
  padding-top: 40px;
}

.layout-howtouse.layout-howtouse--lp {
  position: relative;
}

.layout-howtouse.layout-howtouse--lp::before {
  content: "";
  position: absolute;
  height: 1px;
  top: 0;
  left: 50%;
  width: 73%;
  transform: translateX(-50%);
  background-color: #1d2088;
  display: none;
}

@media (max-width: 767px) {
  .layout-howtouse.layout-howtouse--lp::before {
    width: 80%;
    background-color: #1d2088;
    display: inline-block;
  }
}

.campaign.campaign-second.layout-campaign {
  margin-top: 0px;
}

.campaign.campaign-second .campaign__btn {
  margin-top: 80px;
}

@media (max-width: 767px) {
  .campaign.campaign-second .campaign__btn {
    margin-top: 0px;
  }
}

.campaign.campaign-second .campaign__title-img {
  margin-top: 116px;
}

@media (max-width: 767px) {
  .campaign.campaign-second .campaign__title-img {
    margin-top: 60px;
  }
}

/*============================================
FLOW
============================================*/

.flow {
  padding-top: 106px;
}

@media (max-width: 767px) {
  .flow {
    padding-top: 0px;
  }
}

.layout-flow {
  margin-top: 106px;
  position: relative;
}

.layout-flow::before {
  content: "";
  position: absolute;
  height: 1px;
  top: 0;
  left: 50%;
  width: 73%;
  transform: translateX(-50%);
  display: inline-block;
  background-color: #1d2088;
}

@media (max-width: 767px) {
  .layout-flow {
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .layout-flow::before {
    display: none;
  }
}

.flow__title {}

.lp-title {}

.flow__list {
  margin-top: 85px;
  border-radius: 20px;
}

@media (max-width: 767px) {
  .flow__list {
    margin-top: 19px;
  }
}

.flow__item-flex {
  display: flex;
  margin-right: auto;
}

@media (max-width: 767px) {
  .flow__item-flex {
    display: block;
  }
}

.flow__item {
  position: relative;
  padding: 30px 40px;
  display: flex;
  background-color: #e7ebf7;
  border-radius: 20px;
  align-items: center;
}

.flow__item:not(:last-child):before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  transform: rotate(130deg) translateX(-50%);
  border-top: #1e2088 2px solid;
  border-right: #1e2088 2px solid;
  display: inline-block;
  bottom: -30px;
  left: 48%;
}

@media (max-width: 767px) {
  .flow__item {
    padding: 20px;
    display: block;
  }
}

.flow__item:first-child {
  flex-direction: column;
  margin-right: auto;
}

.flow__item+.flow__item {
  margin-top: 40px;
}

.flow__item:last-child {
  display: block;
}

.flow__item:last-child .flow__item__head {
  margin-top: 20px;
  text-align: left;
}

.flow__item:nth-child(2) .flow-item__title,
.flow__item:nth-child(3) .flow-item__title,
.flow__item:nth-child(4) .flow-item__title {
  max-width: 244px;
  width: 100%;
}

.flow__item:last-child .flow-item__description {
  margin-left: 0px;
}

.flow__item .flow__item {
  margin-top: 44px;
}

.flow-item__title {
  font-size: 30px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1;
  color: #1d2088;
  text-align: left;
}

@media (max-width: 767px) {
  .flow-item__title {
    font-size: 20px;
  }
}

.flow-item__description {
  margin-left: 90px;
  padding-top: 6px;
  text-align: left;
}

@media (max-width: 767px) {
  .flow-item__description {
    margin-left: 0;
  }
}

.flow-item__description-head {
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1;
}

@media (max-width: 767px) {
  .flow-item__description-head {
    font-size: 17px;
  }
}

.flow-item__head {
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1.5;
}

@media (max-width: 767px) {
  .flow-item__head {
    font-size: 17px;
    text-align: left;
  }
}

.flow-item__contact-list {}

.contact-list {
  margin-top: 44px;
}

.contact-list__item {
  font-size: 28px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1.5;
  color: #1d2088;
  text-align: left;
  display: flex;
  align-items: center;
}

@media (max-width: 767px) {
  .contact-list__item {
    font-size: 17px;
  }
}

.contact-list__item+.contact-list__item {
  margin-top: 28px;
}

@media (max-width: 767px) {
  .contact-list__item+.contact-list__item {
    margin-top: 11px;
  }
}

.contact-list__item a {
  font-size: 40px;
  display: inline-block;
  margin-left: 20px;
  color: #1d2088;
}

@media (max-width: 767px) {
  .contact-list__item a {
    font-size: 17px;
  }
}

.flow-item__note {
  margin-top: 26px;
  text-align: left;
}

@media (max-width: 767px) {
  .flow-item__note {
    text-align: left;
  }
}

.flow-item__btn {
  margin-top: 32px;
}

.flow-item__btn a {
  font-size: 30px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1;
  display: inline-block;
  color: #fff;
  padding: 20px 20px;
  width: 100%;
  border-radius: 20px;
  background-color: #1e2088;
}

.flow-item__btn a span {
  color: #fff700;
}

.flow-item__head {}

.flow-item__attention::after {
  position: absolute;
  display: inline-block;
  content: "";
  background-image: url(../water-delivery/images/lp-flow-icon.webp);
  background-size: cover;
  top: -16px;
  left: 20px;
  width: 191px;
  height: 35px;
}

@media (max-width: 767px) {
  .flow-item__attention::after {
    left: 50%;
    transform: translateX(-50%);
    background-image: url(../water-delivery/images/lp-flow-icon-sp.webp);
    top: 15px;
    width: 154px;
    height: 27px;
  }
}

.flow-item__attention {
  position: relative;
  font-size: 25px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1.5;
  background-color: #fff;
  padding: 40px 30px;
  color: #1e2088;
  border-radius: 20px;
  margin-top: 57px;
  text-align: left;
}

@media (max-width: 767px) {
  .flow-item__attention {
    padding: 51px 20px 27px;
    font-size: 17px;
  }
}

.flow-item__attention span {
  color: #fc006e;
}

.flow__btn {
  margin-top: 47px;
}

@media (max-width: 767px) {
  .flow__btn {
    margin-top: 28px;
  }
}

/*============================================
DERIVER
============================================*/
.howtobuy-delivery__wrapper {
  position: relative;
  border-radius: 20px;
  border: 2px solid #1d2088;
  padding-top: 29px;
  padding-bottom: 49px;
}

@media (max-width: 767px) {
  .howtobuy-delivery__wrapper {
    border: none;
    width: 100%;
    min-width: auto;
  }
}

.howtobuy-delivery__wrapper.howtobuy-delivery__wrapper--lp::after {
  position: absolute;
  content: "配達対象エリア";
  width: 360px;
  display: inline-block;
  background-color: #fff;
  top: -35px;
  left: 50%;
  color: #1d2088;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 40px;
  font-weight: 500;
  transform: translateX(-50%);
}

@media (max-width: 767px) {
  .howtobuy-delivery__wrapper.howtobuy-delivery__wrapper--lp::after {
    display: none;
  }
}

/*============================================
LP-FAQ
============================================*/

.lp-faq {
  padding-top: 108px;
}

@media (max-width: 767px) {
  .lp-faq {
    padding-top: 0;
  }
}

.layout-lp-faq {
  margin-top: 116px;
  position: relative;
}

.layout-lp-faq::before {
  content: "";
  position: absolute;
  height: 1px;
  top: 0;
  left: 50%;
  width: 73%;
  transform: translateX(-50%);
  display: inline-block;
  background-color: #1d2088;
}

@media (max-width: 767px) {
  .layout-lp-faq {
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .layout-lp-faq::before {
    display: none;
  }
}

.lp-faq__title {}

.lp-faq__list {
  width: 77%;
  margin-inline: auto;
  margin-top: 93px;
}

@media (max-width: 767px) {
  .lp-faq__list {
    width: 100%;
    margin-top: 32px;
  }
}

.lp-faq-item {
  position: relative;
  border-radius: 20px;
  border: 1px solid #1d2088;
  padding: 30px 40px;
}

@media (max-width: 767px) {
  .lp-faq-item {
    padding: 27px 20px;
  }
}

/*
.lp-faq-item::after {
  position: absolute;
  content: "";
  display: inline-block;
  background-color: #1d2088;
  width: 20px;
  height: 20px;
  clip-path: polygon(50% 17%, 0% 100%, 100% 100%);
  top: 30px;
  right: 40px;
} */

/* @media (max-width: 767px) {
  .lp-faq-item::after {
    top: 25px;
    right: 25px;
    width: 15px;
    height: 15px;
  }
} */

.lp-faq-item+.lp-faq-item {
  margin-top: 40px;
}

.lp-faq-item__question {
  font-size: 30px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1;
  color: #1d2088;
  padding-bottom: 20px;
  text-align: left;
}

@media (max-width: 767px) {
  .lp-faq-item__question {
    font-size: 17px;
    max-width: 88%;
  }
}

.lp-faq-item__answer {
  border-top: 1px dashed #1e2088;
  font-size: 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1.5;
  padding-top: 10px;
  text-align: left;
}

@media (max-width: 767px) {
  .lp-faq-item__answer {
    font-size: 17px;
  }
}

.lp-faq__btn {
  width: 77%;
  margin-top: 40px;
  margin-right: auto;
  margin-left: auto;
}

/*============================================
LP-footer
============================================*/
.lp-footer {
  background-color: #1e2088;
  padding: 24px 0;
}

@media (max-width: 767px) {
  .lp-footer {
    padding: 24px 0;
  }
}

.layout-lp-footer {
  margin-top: 122px;
}

@media (max-width: 767px) {
  .layout-lp-footer {
    margin-top: 40px;
  }
}

.lp-footer__logo {
  width: 100%;
  max-width: 260px;
  margin-inline: auto;
}

.lp-footer__logo a {
  display: inline-block;
}

.lp-footer__copyright {
  display: inline-block;
  margin-top: 24px;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
}

@media (max-width: 767px) {
  .lp-footer__copyright {
    font-size: 12px;
    margin-top: 10px;
  }
}

.lp-footer__copyright span {
  text-transform: uppercase;
}

/*============================================
NEWSPHP
============================================*/
.clearfix {
  display: block;
  min-height: 1%;
}

.clear {
  clear: both;
}

body {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.6;
}

.blog_box {
  /* padding: 15px 20px; */
  /* border: #00a3e1 3px solid; */
  max-width: 1150px;
  padding-left: 25px;
  padding-right: 25px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
}

@media (max-width: 767px) {
  .blog_box {
    max-width: 600px;
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 40px;
  }
}

.shop_infoBox {
  display: flex;
  flex-direction: column;
}

@media (max-width: 767px) {
  .shop_infoBox {
    flex-direction: column-reverse;
  }
}

.shop_infoBox ul li a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.main_title {
  color: #00a3e1;
  font-weight: 600;
  text-align: center;
  font-size: 150%;
  margin: 10px 0;
}

.blog_box ul {
  text-align: left;
  margin: 0;
  padding: 0 0 10px;
  max-height: 200px;
  height: 100%;
  overflow-x: auto;
  width: 100%;
}

.blog_box ul li {
  list-style-type: none;
  padding: 10px 5px;
  border-bottom: solid 1px #ccc;
  position: relative;
}

@media (max-width: 767px) {
  .blog_box ul li {
    padding: 18px 5px;
  }
}

.blog_box ul li::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  display: inline-block;
  border-style: solid;
  border-width: 8px 0 8px 8px;
  border-color: transparent transparent transparent #000;
}

.blog_box ul .shop_box {
  padding-bottom: 8px;
}

.blog_box ul .shop_box .shop {
  display: inline-block;
  padding-right: 7px;
  margin: 5px 0 5px;
}

.blog_box ul .shop_box .shop a {
  display: flex;
  color: #fff;
  background: #00a1e9;
  padding: 2px 5px;
  font-size: 90%;
  border-radius: 3px;
  min-width: 10rem;
  text-align: center;
  line-height: 1.6em;
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
}

.blog_box ul .title {
  font-size: 120%;
  margin: 0;
  display: inline;
}

.blog_box ul .hiduke {
  display: inline-block;
  /* width: 160px; */
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: #727272;
}

@media (max-width: 767px) {
  .blog_box ul .hiduke {
    font-size: 16px;
  }
}

.blog_box ul p.hiduke {
  margin: 0;
}

.blog_box ul .hiduke img {
  padding-left: 5px;
  vertical-align: middle;
}

.blog_box ul li .thum {
  width: 132px;
  float: left;
  margin: 0 15px 0 0;
}

.blog_box ul li .thum img {
  width: 100%;
}

.blog_title {
  /* margin: 0 0; */
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: #1d2088;
  margin-left: 40px;
  text-decoration: none;
}

@media (max-width: 767px) {
  .blog_title {
    font-size: 16px;
    margin-left: 14px;
  }
}

.news__btn {
  text-align: right;
}

@media (max-width: 767px) {
  .news__btn {
    text-align: center;
  }
}

.news__btn a {
  font-family: "Noto Sans JP", sans-serif;
  display: inline-block;
  font-size: 20px;
  color: #fff;
  font-weight: 500;
  padding: 10px 26px 10px 82px;
  position: relative;
  background-color: #1d2088;
  border-radius: 100vh;
}

@media (max-width: 767px) {
  .news__btn a {
    font-size: 14px;
    padding: 9px 24px 9px 70px;
  }
}

.news__btn a::after {
  content: "";
  position: absolute;
  left: 31px;
  top: 50%;
  transform: translateY(-50%);
  background-image: url(/images/btn-news.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 26px;
  height: 23px;
  margin-right: 10px;
}

@media (max-width: 767px) {
  .news__btn a::after {
    width: 19px;
    height: 16px;
  }
}

@media screen and (max-width: 788px) {

  /*********SPに適用*********/
  .blog_box ul .shop_box .shop {
    /* margin: 5px 0 0px; */
  }

  .blog_box ul .hiduke {
    display: block;
    /* width: 160px; */
  }

  .blog_box ul p.blog_title {
    /* margin: 0 0; */
  }

  .news__flex {
    flex-direction: column-reverse;
  }
}

/*============================================
WHAT'S ST
============================================*/

.layout-whatsst {
  margin-top: 70px;
}

@media (max-width: 768px) {
  .layout-whatsst {
    margin-top: 34px;
  }
}

.section .mt20 {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .whatsst-shop {
    padding-top: 50px;
    position: relative;
  }
}

@media (max-width: 768px) {
  .whatsst-shop::after {
    content: "";
    width: 95%;
    height: 2px;
    display: inline-block;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    background-color: #1e2088;
  }
}

.layout-whatsst-shop {
  margin-top: 90px;
}

.whatsst-shop .shop__inner.inner {
  padding-left: 8px;
  padding-right: 8px;
}

.whatsst-logo {
  text-align: center;
}

/* =========================================
   From index.html (Refactored)
   ========================================= */

/* タブUI（デフォルトで非表示、スマホで表示） */
.comparison-tabs {
  display: none;
}

.comparison-tabs__buttons {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
  background: #f0f4ff;
  padding: 5px;
  border-radius: 10px;
}

.comparison-tabs__btn {
  flex: 1;
  padding: 12px 8px;
  border: none;
  background: transparent;
  color: #4a5d99;
  font-size: 0.85rem;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.comparison-tabs__btn.active {
  background: #4a5d99;
  color: #fff;
}

.comparison-tabs__btn[data-tab="shop"].active {
  background: #4a5d99;
}

.comparison-tabs__btn[data-tab="delivery"].active {
  background: #e74c3c;
}

.comparison-tabs__btn[data-tab="server"].active {
  background: #27ae60;
}

.comparison-tabs__content {
  display: none;
}

.comparison-tabs__content.active {
  display: block;
}

.comparison-tabs__card {
  background: #fff;
  border-radius: 0;
  padding: 10px 20px 30px;
  text-align: center;
  box-shadow: none;
}

.comparison-tabs {
  padding: 0 !important;
  margin: 0 -15px;
}

.comparison-tabs__buttons {
  margin-left: 15px;
  margin-right: 15px;
}

.comparison-tabs__card--shop {
  border-top: 4px solid #4a5d99;
}

.comparison-tabs__card--delivery {
  border-top: 4px solid #e74c3c;
}

.comparison-tabs__card--server {
  border-top: 4px solid #27ae60;
}

.comparison-tabs__icon {
  width: 320px;
  height: 170px;
  margin: 0 auto 0;
  overflow: hidden;
}

.comparison-tabs__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(2.0);
}

.comparison-tabs__title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  margin-top: 0 !important;
  margin-bottom: 15px;
  border-left: none !important;
  border-top: none !important;
  border-right: none !important;
  padding-left: 0 !important;
  background: none !important;
  text-align: center;
  display: block;
  width: 100%;
  padding-bottom: 10px;
}

.comparison-tabs__card h3 {
  border-left: none !important;
  border-top: none !important;
  border-right: none !important;
  padding-left: 0 !important;
  background: none !important;
}

.comparison-tabs__card--shop .comparison-tabs__title {
  border-bottom: 3px solid #4a5d99 !important;
}

.comparison-tabs__card--delivery .comparison-tabs__title {
  border-bottom: 3px solid #e74c3c !important;
}

.comparison-tabs__card--server .comparison-tabs__title {
  border-bottom: 3px solid #27ae60 !important;
}

.comparison-tabs__price {
  font-size: 2.2rem;
  font-weight: bold;
  color: #4a5d99;
  margin-bottom: 20px;
}

.comparison-tabs__price span {
  font-size: 1rem;
  font-weight: normal;
  color: #666;
}

.comparison-tabs__list {
  list-style: none;
  text-align: left;
  margin-bottom: 25px;
  padding: 0 10px;
}

.comparison-tabs__list li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  font-size: 0.95rem;
  color: #333;
}

.comparison-tabs__list li:last-child {
  border-bottom: none;
}

.comparison-tabs__list .mark {
  display: inline-block;
  width: 24px;
  margin-right: 8px;
  font-weight: bold;
}

.comparison-tabs__list .mark.good {
  color: #4a5d99;
}

.comparison-tabs__list .mark.normal {
  color: #f39c12;
}

.comparison-tabs__list .mark.dash {
  color: #999;
}

.comparison-tabs__btn-link {
  display: inline-block;
  padding: 15px 40px;
  background: linear-gradient(135deg, #ff6b9d 0%, #ff4081 100%);
  color: #fff !important;
  text-decoration: none;
  border-radius: 30px;
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.comparison-tabs__btn-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 64, 129, 0.3);
}

.comparison-tabs__btn-link--disabled {
  background: #ccc;
  cursor: default;
}

.comparison-tabs__btn-link--disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Features Section */
.features {
  padding: 80px 0;
}

.features__title {
  font-size: 2.2rem;
  font-weight: normal;
  text-align: center;
  /* margin-bottom & color overridden by Unified Styles */
  letter-spacing: 0.1em;
}

.features__list {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin: 0 auto;
  padding: 0 20px;
}

.features__item {
  flex: 0 1 200px;
  text-align: center;
  background: #fff;
  border-radius: 20px;
  padding: 25px 20px;
  border: 1px solid #000;
}

.features__icon {
  width: 180px;
  height: 180px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.features__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.features__text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #4a5d99;
  font-weight: normal;
  letter-spacing: 0.08em;
}

.features__number {
  font-size: 1.3rem;
  font-weight: normal;
  color: #4a5d99;
  letter-spacing: 0.05em;
}

/* News Section */
.news {
  padding: 80px 0 20px 0;
  background: #fff;
}

.news__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.news__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
}

.news__title {
  font-size: 2.2rem;
  font-weight: normal;
  /* color overridden by Unified Styles */
  letter-spacing: 0.1em;
  text-align: left;
}

.news__btn {
  background: #4a5d99;
  color: #fff !important;
  padding: 12px 30px;
  border-radius: 25px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.news__btn:hover {
  opacity: 0.9;
}

.news__list {
  display: block;
}

.news__item {
  display: flex;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: #333;
  transition: background-color 0.3s;
}

.news__item:hover {
  background-color: #f9f9f9;
}

.news__date {
  font-size: 1rem;
  color: #888;
  margin-right: 30px;
  min-width: 100px;
}

.news__category {
  font-size: 0.85rem;
  color: #4a5d99;
  border: 1px solid #4a5d99;
  padding: 4px 12px;
  border-radius: 4px;
  margin-right: 20px;
  white-space: nowrap;
}

.news__content {
  font-size: 1rem;
  line-height: 1.6;
  flex: 1;
}

/* Instagram Section */
.instagram {
  padding: 80px 0;
  background: #d9eff7 !important;
  position: relative;
}

.instagram::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  height: 30px;
  background: radial-gradient(ellipse at 50% 100%, #d9eff7 65%, transparent 66%);
  background-size: 100px 30px;
}

.instagram__inner {
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 20px;
}

.instagram__title {
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
  color: #4a5d99;
  margin-bottom: 10px;
  letter-spacing: 0.1em;
}

.instagram__subtitle {
  text-align: center;
  color: #4a5d99;
  font-size: 1.1rem;
  margin-bottom: 40px;
  letter-spacing: 0.1em;
}

.instagram__grid {
  display: flex;
  justify-content: center;
}

/* Promo/Campaign Styles */
.promo-list {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-top: 10px;
}

.promo-item {
  display: flex;
  align-items: center;
  gap: 5%;
  position: relative;
  padding: 40px 0;
}

.promo-item:nth-child(even) {
  flex-direction: row-reverse;
}

.promo-bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12rem;
  font-weight: 900;
  color: #f0f4ff;
  z-index: -1;
  white-space: nowrap;
  font-family: "Arial", sans-serif;
  letter-spacing: 0.05em;
  opacity: 0.5;
}

.promo-text-group {
  flex: 1;
  z-index: 1;
}

.promo-visual {
  width: 45%;
  position: relative;
  z-index: 1;
}

.promo-title {
  font-size: 2.8rem;
  font-weight: bold;
  color: #333;
  line-height: 1.3;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
  font-family: "Noto Sans JP", sans-serif;
}

.promo-title span {
  color: #e74c3c;
  font-size: 5.2rem;
  font-family: "Noto Sans JP", sans-serif;
  margin: 0 5px;
  display: inline-block;
  transform: rotate(-2deg);
  line-height: 1;
  letter-spacing: 0.1em;
}

.promo-title small {
  font-size: 1.4rem;
  color: #333;
}

.promo-description {
  font-size: 1.3rem;
  color: #1a3452;
  line-height: 1.8;
  margin-bottom: 25px;
  font-weight: 500;
}

.promo-btn {
  display: inline-flex;
  align-items: center;
  background: #4a5d99;
  color: #fff !important;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(74, 93, 153, 0.3);
}

.promo-btn:hover {
  background: #39487a;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(74, 93, 153, 0.4);
}

.promo-btn::after {
  content: "→";
  margin-left: 10px;
  transition: transform 0.3s;
}

.promo-btn:hover::after {
  transform: translateX(5px);
}

.promo-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
}

.promo-item:nth-child(even) .promo-actions {
  justify-content: flex-end;
}

.promo-label {
  margin-bottom: 0;
  font-size: 1.1rem;
  background: #f0f4ff;
  padding: 8px 15px;
  border-radius: 4px;
  color: #4a5d99 !important;
  font-weight: bold;
}

.promo-label.red {
  background: #ffeaea;
  color: #4a5d99 !important;
}



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

  /* 選べる3つの購入方法の下スペース削除 */
  .campaign .comparison__title {
    margin-bottom: 0 !important;
  }

  .campaign .promo-list {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .campaign .promo-item:first-child {
    padding-top: 10px !important;
  }

  /* ウォーターステーションの特徴の下スペース削除 */
  .features__title {
    margin-bottom: 15px !important;
  }

  /* 選べる3つの購入方法の上スペース */
  .layout-campaign {
    padding-top: 30px !important;
  }

  /* お水の購入方法の上スペース */
  .layout-comparison {
    padding-top: 30px !important;
  }

  /* タブUI表示 */
  .comparison-tabs {
    display: block !important;
  }

  .comparison__table {
    display: none !important;
  }

  /* スライド2: スマホで白色 */
  .mv__hero-text.hero-text-slide2 .mv__hero-title,
  .mv__hero-text.hero-text-slide2 .mv__hero-title-line {
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
  }

  .hero-text-slide4 .mv__hero-title {
    text-shadow: none !important;
  }

  .hero-text-slide4 .mv__hero-title-line {
    font-size: 1.3rem !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
    margin-top: 0 !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 5px rgba(255, 255, 255, 0.8);
    color: #000 !important;
  }

  /* Promo Section Mobile */
  .promo-list {
    gap: 40px;
  }

  .promo-item,
  .promo-item:nth-child(even) {
    flex-direction: column-reverse;
    text-align: center;
    padding: 20px 0;
  }

  .promo-bg-text {
    font-size: 4rem;
    opacity: 0.1;
  }

  .promo-text-group {
    padding: 20px 0 0;
  }

  .promo-visual {
    width: 80%;
    max-width: 300px;
  }

  .promo-title {
    font-size: 2.2rem;
  }

  .promo-title span {
    font-size: 2.8rem;
  }

  /* 選べる3つの購入方法: 改行削除（スマホ） */
  .comparison__title br.sp-br,
  .comparison__title br {
    display: none !important;
  }
}


/* Mobile Line Break Fix */
@media screen and (max-width: 768px) {
  .spnone {
    display: none !important;
  }
}

/* スマホ版のみ改行 */
.sp-br {
  display: none;
}

@media screen and (max-width: 768px) {
  .sp-br {
    display: block;
  }

  /* 選べる3つの購入方法の下スペース削除 */
  .campaign .comparison__title {
    margin-bottom: 0 !important;
  }

  .campaign .promo-list {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .campaign .promo-item:first-child {
    padding-top: 10px !important;
  }

  /* ウォーターステーションの特徴の下スペース削除 */
  .features__title {
    margin-bottom: 15px !important;
  }

  /* 選べる3つの購入方法の上スペース */
  .layout-campaign {
    padding-top: 30px !important;
  }

  /* お水の購入方法の上スペース */
  .layout-comparison {
    padding-top: 30px !important;
  }

  /* タブUI表示 */
  .comparison-tabs {
    display: block !important;
  }

  .comparison__table {
    display: none !important;
  }

  /* スライド2: スマホで白色 */
  .mv__hero-text.hero-text-slide2 .mv__hero-title,
  .mv__hero-text.hero-text-slide2 .mv__hero-title-line {
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
  }

  .hero-text-slide4 .mv__hero-title {
    text-shadow: none !important;
  }

  .hero-text-slide4 .mv__hero-title-line {
    font-size: 1.3rem !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
    /* Reduced line height */
    margin-top: 0 !important;
    /* Tighten margin */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 5px rgba(255, 255, 255, 0.8);
    color: #000 !important;
  }
}

/* タブUI（デフォルトで非表示、スマホで表示） */
.comparison-tabs {
  display: none;
}

.comparison-tabs__buttons {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
  background: #f0f4ff;
  padding: 5px;
  border-radius: 10px;
}

.comparison-tabs__btn {
  flex: 1;
  padding: 12px 8px;
  border: none;
  background: transparent;
  color: #4a5d99;
  font-size: 0.85rem;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.comparison-tabs__btn.active {
  background: #4a5d99;
  color: #fff;
}

.comparison-tabs__btn[data-tab="shop"].active {
  background: #4a5d99;
}

.comparison-tabs__btn[data-tab="delivery"].active {
  background: #e74c3c;
}

.comparison-tabs__btn[data-tab="server"].active {
  background: #27ae60;
}

.comparison-tabs__content {
  display: none;
}

.comparison-tabs__content.active {
  display: block;
}

.comparison-tabs__card {
  background: #fff;
  border-radius: 0;
  padding: 10px 20px 30px;
  text-align: center;
  box-shadow: none;
}

.comparison-tabs {
  padding: 0 !important;
  margin: 0 -15px;
}

.comparison-tabs__buttons {
  margin-left: 15px;
  margin-right: 15px;
}

.comparison-tabs__card--shop {
  border-top: 4px solid #4a5d99;
}

.comparison-tabs__card--delivery {
  border-top: 4px solid #e74c3c;
}

.comparison-tabs__card--server {
  border-top: 4px solid #27ae60;
}

.comparison-tabs__icon {
  width: 320px;
  height: 170px;
  margin: 0 auto 0;
  overflow: hidden;
}

.comparison-tabs__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(2.0);
}

.comparison-tabs__title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  margin-top: 0 !important;
  margin-bottom: 15px;
  border-left: none !important;
  border-top: none !important;
  border-right: none !important;
  padding-left: 0 !important;
  background: none !important;
  text-align: center;
  display: block;
  width: 100%;
  padding-bottom: 10px;
}

.comparison-tabs__card {
  text-align: center;
}

.comparison-tabs__card h3 {
  border-left: none !important;
  border-top: none !important;
  border-right: none !important;
  padding-left: 0 !important;
  background: none !important;
}

/* 各カードのタイトル下ボーダー色 */
.comparison-tabs__card--shop .comparison-tabs__title {
  border-bottom: 3px solid #4a5d99 !important;
}

.comparison-tabs__card--delivery .comparison-tabs__title {
  border-bottom: 3px solid #e74c3c !important;
}

.comparison-tabs__card--server .comparison-tabs__title {
  border-bottom: 3px solid #27ae60 !important;
}

.comparison-tabs__price {
  font-size: 2.2rem;
  font-weight: bold;
  color: #4a5d99;
  margin-bottom: 20px;
}

.comparison-tabs__price span {
  font-size: 1rem;
  font-weight: normal;
  color: #666;
}

.comparison-tabs__list {
  list-style: none;
  text-align: left;
  margin-bottom: 25px;
  padding: 0 10px;
}

.comparison-tabs__list li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  font-size: 0.95rem;
  color: #333;
}

.comparison-tabs__list li:last-child {
  border-bottom: none;
}

.comparison-tabs__list .mark {
  display: inline-block;
  width: 24px;
  margin-right: 8px;
  font-weight: bold;
}

.comparison-tabs__list .mark.good {
  color: #4a5d99;
}

.comparison-tabs__list .mark.normal {
  color: #f39c12;
}

.comparison-tabs__list .mark.dash {
  color: #999;
}

.comparison-tabs__btn-link {
  display: inline-block;
  padding: 15px 40px;
  background: linear-gradient(135deg, #ff6b9d 0%, #ff4081 100%);
  color: #fff !important;
  text-decoration: none;
  border-radius: 30px;
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.comparison-tabs__btn-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 64, 129, 0.3);
}

.comparison-tabs__btn-link--disabled {
  background: #ccc;
  cursor: default;
}

.comparison-tabs__btn-link--disabled:hover {
  transform: none;
  box-shadow: none;
}

/* メインビジュアル */
.mv__hero {
  position: relative;
  width: 100%;
  height: clamp(360px, 60vw, 580px);
  overflow: hidden;
}

.mv__hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 20%;
}

/* スライド4用リンクラッパー */
.mv__hero-link {
  display: block;
  width: 100%;
  height: 100%;
}

.mv__hero-text {
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
  text-align: left;
  color: #fff;
  width: auto;
  padding: 0 20px;
}

/* スライド4 テキスト（スマホをデフォルト） */
.mv__hero-text.hero-text-slide4 {
  top: 2% !important;
  left: 5px !important;
  right: auto !important;
  transform: none !important;
  text-align: left;
  padding: 0 5px;
  width: calc(100% - 10px);
  max-width: 320px;
}

@media screen and (min-width: 769px) {
  .mv__hero-text.hero-text-slide4 {
    top: 30% !important;
    right: 0% !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    width: auto;
    max-width: none;
    padding: 0 20px;
  }
}

.mv__hero-title {
  font-size: 3rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.14em;
  margin-bottom: 30px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.mv__hero-title-line {
  display: block;
}

.mv__hero-description {
  font-size: 1.2rem;
  line-height: 1.8;
}

.mv__hero-description p {
  margin: 5px 0;
}

/* お知らせ */
.news {
  padding: 80px 0 20px 0;
  /* margin-top: -100px; removed to place news below wave */
  position: relative;
  /* z-index: 1; removed */
  clear: both;
  width: 100%;
}

/* Instagram */
.instagram {
  padding: 80px 0;
  background: #d9eff7 !important;
  /* 清潔感のある水色（本体） */
  position: relative;
  /* 波線配置用 */
}

/* 上部の波線（疑似要素で作成） */
.instagram::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  height: 30px;
  /* 上向きの「横長な楕円」を繰り返して、もっともっとゆるやかな波を作る */
  background: radial-gradient(ellipse at 50% 100%, #d9eff7 65%, transparent 66%);
  background-size: 100px 30px;
  /* 幅100px 高さ30px に調整 */
}

.news__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.news__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
}

.news__title {
  font-size: 2.2rem;
  font-weight: normal;
  /* color overridden */
  letter-spacing: 0.1em;
  text-align: left;
}

.news__btn {
  background: #4a5d99;
  color: #fff !important;
  padding: 12px 30px;
  border-radius: 25px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.news__btn:hover {
  background: #3a4d89;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(74, 93, 153, 0.3);
}

.news__btn-icon {
  font-size: 1.2rem;
  font-weight: bold;
}

.news__list {
  list-style: none;
}

.news__item {
  border-bottom: 1px solid #e0e0e0;
}

.news__item a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 25px 0;
  text-decoration: none;
  color: #333;
  transition: background 0.3s ease;
}

.news__item a:hover {
  background: #f8f9ff;
}

.news__date {
  font-size: 1rem;
  color: #666;
  min-width: 180px;
  margin-right: 30px;
  letter-spacing: 0.05em;
  text-align: left;
}

.news__text {
  flex: 1;
  font-size: 1rem;
  color: #333;
  letter-spacing: 0.05em;
  text-align: left;
}

.news__arrow {
  color: #4a5d99;
  font-size: 0.8rem;
  margin-left: 20px;
}

/* キャンペーンバナー */
.campaign {
  padding: 10px 0 10px 0;
  background: #fff;
  border-bottom: none !important;
}

.layout-campaign {
  border-bottom: none !important;
}

.campaign__list {
  display: flex;
  justify-content: center;
  gap: 35px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
}

.campaign__item {
  flex: 1;
  max-width: 380px;
  background: #dde4f5;
  border-radius: 0;
  overflow: hidden;
  padding: 25px 30px;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.campaign__content {
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.campaign__text {
  font-size: 1.25rem;
  font-weight: normal;
  line-height: 1.8;
  color: #333;
  letter-spacing: 0.05em;
  margin: 0;
}

/* 購入方法比較表 */
.comparison {
  padding: 0 0 80px 0;
  background: #fff;
  border-top: none !important;
  margin-top: 0 !important;
}

.layout-comparison {
  border-top: none !important;
  margin-top: 0 !important;
}

.layout-comparison::before {
  display: none !important;
}

.comparison__title {
  font-size: 2.5rem;
  font-weight: normal;
  text-align: center;
  margin-bottom: 0;
  margin-top: 0;
  color: #333;
  letter-spacing: 0.1em;
}

.comparison__subtitle {
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 0;
  color: #666;
  font-weight: normal;
  letter-spacing: 0.05em;
}

.comparison__table {
  max-width: 1400px;
  margin: 0 auto;
  border: none;
}

.comparison__table-row {
  display: flex;
  border-bottom: 2px solid #4a5d99;
  gap: 15px;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.comparison__table-row--header {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.comparison__table-row--price {
  border-bottom: none;
  padding-bottom: 5px;
  margin-bottom: 5px;
}

.comparison__table-row--price .comparison__table-cell {
  padding-top: 0;
}

.comparison__table-row--icon {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.comparison__table-row--icon .comparison__table-cell {
  padding-bottom: 0;
}

.comparison__table-row--header .comparison__table-cell {
  padding: 30px 15px;
  align-items: flex-end;
}

.comparison__table-cell {
  flex: 1;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: none;
  position: relative;
}

.comparison__table-cell:last-child {
  border-right: none;
}

.comparison__table-cell--label {
  flex: 0 0 180px;
  background: transparent;
  font-weight: bold;
  font-size: 0.95rem;
  color: #333;
  justify-content: flex-start;
  text-align: left;
  align-items: center;
}

.comparison__table-cell--left-align {
  justify-content: flex-start;
  text-align: left;
  padding-left: 20px;
}

.comparison__table-row--header .comparison__table-cell--plan-shop {
  background: #dde4f5;
  border-radius: 20px 20px 0 0;
  padding: 20px 30px 0 30px !important;
}

.comparison__table-row--header .comparison__table-cell--recommended {
  background: #f5d4e0;
  border-radius: 20px 20px 0 0;
  padding: 20px 30px 0 30px !important;
}

.comparison__table-row--header .comparison__table-cell--plan-dispenser {
  background: #d4f5e8;
  border-radius: 20px 20px 0 0;
  padding: 20px 30px 0 30px !important;
}

.comparison__table-cell--icon {
  padding: 0 5px;
  height: 150px;
  overflow: hidden;
}

.comparison__table-cell--icon img {
  width: 250px;
  height: 250px;
  object-fit: contain;
}

.comparison__plan-title {
  font-size: 1.05rem;
  font-weight: bold;
  color: #333;
  margin: 0;
  line-height: 1;
  background-image: none !important;
  background: none !important;
}

.comparison__price {
  font-size: 2rem;
  font-weight: bold;
  color: #4a5d99;
  margin: 0;
}

.comparison__price-unit {
  font-size: 1.2rem;
  font-weight: normal;
}

.comparison__family {
  font-size: 0.9rem;
  color: #333;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.comparison__family-btn {
  background: #fff;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 0.9rem;
  color: #333;
  cursor: pointer;
  font-weight: bold;
}

.comparison__detail-link {
  color: #4a5d99;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: opacity 0.3s ease;
  display: inline-block;
  padding: 8px 20px;
  border-radius: 20px;
  background: #fff;
}

.comparison__table-cell--detail.comparison__table-cell--plan-shop {
  background: #dde4f5;
  border-radius: 20px;
}

.comparison__table-cell--detail.comparison__table-cell--recommended {
  background: #f5d4e0;
  border-radius: 20px;
}

.comparison__table-cell--detail.comparison__table-cell--plan-dispenser {
  background: #d4f5e8;
  border-radius: 20px;
}

.comparison__table-cell--detail .comparison__detail-link {
  background: transparent;
}

.comparison__detail-link:hover {
  opacity: 0.7;
}

.comparison__radio {
  font-size: 1.1rem;
  color: #4a5d99;
  margin-right: 5px;
}

.comparison__dash {
  font-size: 1.2rem;
  color: #999;
}

.comparison__apply-btn {
  display: inline-block;
  padding: 12px 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 25px;
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #ff6b9d 0%, #ff4081 100%);
  color: #fff !important;
  border: none;
}

.comparison__apply-btn:hover {
  background: linear-gradient(135deg, #ff5a8c 0%, #ff2f70 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 64, 129, 0.3);
}

/* Instagram */
.instagram {
  padding: 80px 0;
  background: linear-gradient(180deg, #f5f7ff 0%, #fff 100%);
}

.instagram__title {
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
  color: #333;
}

.instagram__subtitle {
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 50px;
  color: #666;
}

.instagram__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.instagram__item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.instagram__item:hover {
  transform: scale(1.05);
}

.instagram__item a {
  display: block;
  width: 100%;
  height: 100%;
}

.instagram__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .mv__hero-title {
    font-size: 1.5rem;
    line-height: 2.0;
  }

  .mv__hero-text {
    top: 3% !important;
    right: 5% !important;
    transform: none !important;
    text-align: left;
    width: auto;
    padding: 0 10px;
  }

  .mv__hero-description {
    font-size: 1rem;
  }

  .features {
    padding: 30px 0 60px 0;
    /* 上部の余白を縮小・統一 */
  }

  .features__title {
    font-size: 1.8rem;
    margin-bottom: 40px;
  }

  .features__list {
    flex-wrap: wrap;
    gap: 20px;
  }

  .features__item {
    flex: 0 1 calc(50% - 10px);
    padding: 40px 20px;
  }

  .features__icon {
    width: 160px;
    height: 160px;
    margin-bottom: 20px;
  }

  /* ヒーローセクション下部の余白削除 */
  .mv {
    margin-bottom: 0 !important;
  }

  .news {
    padding: 0 0 60px 0 !important;
    margin-top: 0 !important;
  }

  .news__header {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
  }

  .news__title {
    font-size: 1.8rem;
  }

  .news__btn {
    position: static;
    width: 100%;
    justify-content: center;
    max-width: 300px;
  }

  .news__item a {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 0;
    gap: 8px;
  }

  .news__date {
    font-size: 0.9rem;
  }

  .news__text {
    font-size: 0.95rem;
  }

  .news__arrow {
    align-self: flex-end;
  }

  .campaign__list {
    flex-direction: column;
    gap: 20px;
  }

  .campaign__item {
    max-width: 100%;
    padding: 20px 20px;
    min-height: 60px;
  }

  .campaign__text {
    font-size: 1.1rem;
  }

  .comparison {
    padding: 30px 0 60px 0;
    /* 上部の余白を縮小・統一 */
  }

  .comparison__title {
    font-size: 2rem;
    margin-bottom: 15px;
  }

  .comparison__subtitle {
    font-size: 1rem;
    margin-bottom: 40px;
  }

  .comparison__table {
    flex-direction: column;
    gap: 20px;
  }

  .comparison__header {
    padding: 30px 15px 20px;
  }

  .comparison__column--recommended .comparison__header {
    padding-top: 40px;
  }

  .comparison__plan-title {
    font-size: 1.2rem;
  }

  .comparison__price {
    font-size: 2rem;
  }

  .comparison__body {
    padding: 20px 15px;
  }

  .comparison__footer {
    padding: 15px;
  }

  .instagram {
    padding: 30px 0 0 0;
    /* 上部の余白は30px、下部は0に */
  }

  .instagram__title {
    font-size: 2rem;
  }

  .instagram__subtitle {
    font-size: 1rem;
    margin-bottom: 40px;
  }

  .instagram__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* スマホ版: iframeの高さを調整して下の余白を削除 */
  .snapwidget-widget {
    width: 100% !important;
    height: 330px !important;
  }

  /* スマホ版: ヒーロー画像の高さ固定を解除（画像なりにする） */
  .mv__hero,
  .mv__slide-image {
    height: auto !important;
    min-height: auto !important;
  }

  .mv__hero img,
  .mv__slide-image img {
    height: auto !important;
    position: static !important;
    /* object-fit解除のため念のため */
  }
}

/* スライダー用スタイル */
.mv__slider-main {
  position: relative;
  width: 100%;
}

.mv__slider-main .swiper-slide {
  width: 100%;
}

/* シンプル画像スライド */
.mv__slide-image {
  width: 100%;
  background: #f8f9fa;
  height: clamp(360px, 60vw, 580px);
  overflow: hidden;
}

.mv__slide-image img {
  width: 100%;
  height: 100%;
  max-width: 1400px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

/* ナビゲーション矢印 */
.mv__slider-main .swiper-button-prev,
.mv__slider-main .swiper-button-next {
  color: #4a5d99;
  background: rgba(255, 255, 255, 0.9);
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.mv__slider-main .swiper-button-prev:after,
.mv__slider-main .swiper-button-next:after {
  font-size: 20px;
}

/* サムネイルスライダー */
.mv__slider-thumbs {
  margin-top: 20px;
  margin-bottom: 30px;
  padding: 0 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.mv__slider-thumbs .swiper-slide {
  opacity: 0.4;
  cursor: pointer;
  border: 3px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.mv__slider-thumbs .swiper-slide:hover {
  opacity: 0.7;
}

.mv__slider-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  border-color: #4a5d99;
}

.mv__slider-thumbs .swiper-slide img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
}

/* PC専用: ヒーロースライダー調整 */
@media (min-width: 768px) {

  /* ドット（ページネーション）を非表示 */
  .mv__slider-main .swiper-pagination {
    display: none;
  }

  /* サムネイルを4つ横並びにする (幅25%) */
  .mv__slider-thumbs .swiper-slide {
    width: 25% !important;
  }
}

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

  .mv__slider-main .swiper-button-prev,
  .mv__slider-main .swiper-button-next {
    width: 40px;
    height: 40px;
  }

  .mv__slider-main .swiper-button-prev:after,
  .mv__slider-main .swiper-button-next:after {
    font-size: 16px;
  }

  .mv__slider-thumbs .swiper-slide img {
    height: 60px;
  }
}

/* セクション間の余白調整（Instagramとフッターの間） */
.layout-instagram {
  margin-bottom: 0 !important;
}

.layout-footer {
  margin-top: 0 !important;
}

/* スマホ対応：ハンバーガーメニューヘッダー（768px以下） */
@media screen and (max-width: 768px) {

  /* キャンペーンテキストのフォントサイズ調整 */
  .promo-description {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
  }

  /* スマホ版: 固定フッター削除に伴い、body/htmlの下部余白を削除 */
  body,
  html {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
    min-height: auto !important;
    overflow-x: hidden !important;
  }

  /* コンテンツ全体の余白を削除 */
  #maincontainer,
  #contents,
  .content,
  .styled {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* フッター自体の余白も強制削除 */
  .footer,
  .layout-footer {
    margin-bottom: 0 !important;
    padding-bottom: 15px !important;
  }

  .footer__copyright {
    margin-top: 30px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    display: block !important;
  }
}

/*============================================
ヘッダー関連スタイル（スマホ版）
============================================*/
/*
このセクションはスマホ版（768px以下）のヘッダースタイルです。
PC版のヘッダースタイルは「ヘッダー（全ページ共通）」セクション（909-1128行）を参照してください。
全てのヘッダー関連スタイルの管理場所はそちらのコメントに記載されています。
*/

@media (max-width: 768px) {

  /* スマホ版: ヘッダーをハンバーガーメニュー対応に */
  .header.layout-header.js-header {
    background-color: #fff !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
    overflow: visible !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    z-index: 1000 !important;
  }

  /* ヘッダー固定による余白確保 */
  body {
    padding-top: 50px !important;
  }

  .header.layout-header.js-header .header__inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 !important;
    height: 50px !important;
    overflow: visible !important;
  }

  .header.layout-header.js-header .header__logo {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 10px 0 15px !important;
  }

  .header.layout-header.js-header .header__logo a {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    width: auto !important;
  }

  .header.layout-header.js-header .header__logo img {
    height: 44px !important;
    width: auto !important;
    display: block !important;
  }

  .header.layout-header.js-header .header__nav {
    display: none !important;
  }

  /* ハンバーガーメニューボタン */
  .header.layout-header.js-header .header__hamburger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 36px !important;
    height: 36px !important;
    margin-right: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 101 !important;
    position: relative !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
  }

  .header.layout-header.js-header .header__hamburger span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background-color: #333 !important;
    margin: 3px 0 !important;
    border-radius: 1px !important;
    transition: all 0.3s ease !important;
  }

  /* ハンバーガーメニュー開閉アニメーション */
  .header.layout-header.js-header .header__hamburger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
  }

  .header.layout-header.js-header .header__hamburger.active span:nth-child(2) {
    opacity: 0 !important;
  }

  .header.layout-header.js-header .header__hamburger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
  }

  /* スマホ版: 旧モバイルヘッダー（heading-nav）を非表示 - ハンバーガーメニュー付きヘッダーを使用 */
  .heading-nav,
  .heading-nav.js-header-nav {
    display: none !important;
  }

  /* お水の購入方法のアイコンを中央表示 */
  .page-top__contents {
    flex-direction: column !important;
    align-items: center !important;
  }

  .page-top__item {
    width: auto !important;
    text-align: center !important;
  }

  .page-top__item a {
    display: inline-block !important;
    min-width: 200px !important;
  }

  /* 特徴カード - モダンデザイン */
  .features.layout-features {
    background: #fff !important;
    padding: 40px 0 !important;
  }

  /* 旧統一スタイル削除 (Unified styles moved to end of file) */



  .features__inner.inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .features__list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  .features__item {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 20px 12px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow:
      0 4px 15px rgba(29, 32, 136, 0.08),
      0 1px 3px rgba(0, 0, 0, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(29, 32, 136, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  }

  .features__item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #1d2088, #4a5dc9, #7b8ee0) !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .features__item:nth-child(1)::before {
    background: linear-gradient(90deg, #1d2088, #3a4cc0) !important;
  }

  .features__item:nth-child(2)::before {
    background: linear-gradient(90deg, #2e7d32, #4caf50) !important;
  }

  .features__item:nth-child(3)::before {
    background: linear-gradient(90deg, #0288d1, #29b6f6) !important;
  }

  .features__item:nth-child(4)::before {
    background: linear-gradient(90deg, #f57c00, #ffb74d) !important;
  }

  .features__icon {
    width: 70px !important;
    height: 70px !important;
    margin: 0 auto 12px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
  }

  .features__icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .features__text {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    color: #333 !important;
    text-align: center !important;
    margin: 0 !important;
  }

  .features__number {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #1d2088, #4a5dc9) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }

  .features__item:nth-child(2) .features__number {
    background: linear-gradient(135deg, #2e7d32, #4caf50) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }

  .features__item:nth-child(4) .features__number {
    background: linear-gradient(135deg, #f57c00, #ff9800) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }

  /* キャンペーンラベル・ボタン調整 */
  .promo-actions {
    flex-direction: row;
    /* 横並び維持 */
    flex-wrap: nowrap;
    gap: 10px !important;
    justify-content: space-between;
  }

  .promo-label {
    font-size: 0.9rem !important;
    /* ラベル文字サイズ縮小 */
    padding: 6px 10px !important;
    white-space: nowrap;
    flex: 0 0 auto;
    /* 縮まないように */
  }

  .promo-btn {
    font-size: 0.9rem !important;
    /* ボタン文字サイズ縮小 */
    padding: 8px 15px !important;
    /* パディング縮小 */
    width: auto !important;
    flex: 1;
    /* 残りの幅を使う */
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 画像を横幅いっぱいにする調整 */
  .promo-visual {
    width: calc(100% + 40px) !important;
    /* 親のpadding(20px*2)分広げる */
    max-width: none !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    margin-top: 20px;
  }



  .mv__slider-thumbs {
    display: none !important;
    /* サムネイルを非表示 */
  }

  .mv__slider-main {
    padding-bottom: 30px !important;
    /* ドット表示用のスペース確保 */
  }

  .mv__slider-main .swiper-pagination {
    display: block !important;
    /* ドット表示 */
    bottom: 5px !important;
    /* パディング領域に配置 */
  }

  .swiper-button-next,
  .swiper-button-prev {
    display: flex !important;
    /* 矢印を表示 */
    width: 30px !important;
    /* スマホ用にサイズ調整 */
    height: 30px !important;
    margin-top: -15px !important;
    /* 中心位置調整 */
  }

  .swiper-button-next::after,
  .swiper-button-prev::after {
    font-size: 20px !important;
    /* 矢印アイコンのサイズ */
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    /* 視認性向上のための影 */
  }
}

/* スマホ対応：比較表は非表示（タブUIを使用） */
@media screen and (max-width: 767px) {
  .comparison__table {
    display: none !important;
  }

  .comparison__apply-btn {
    font-size: 0.85rem !important;
    padding: 10px 15px !important;
    white-space: nowrap;
  }

  /* スマホ版: ページトップボタン非表示 */
  .pagetop2 {
    display: none !important;
  }

}

/* セクション間の余白調整 */
.layout-features {
  padding-bottom: 80px !important;
  /* 60px -> 80px もう少し広げる */
  margin-bottom: 0 !important;
}

.campaign__inner {
  padding: 0 20px;
  /* 特徴セクションと同じ左右余白を設定 */
}

.layout-campaign {
  padding-top: 50px !important;
  /* 元に戻す */
  margin-top: 0 !important;
}

.layout-comparison {
  padding-top: 100px !important;
  /* お水の購入方法の上部にスペース追加 */
}

.instagram,
.comparison,
.page-top,
.store-benefits,
.recommended-section,
.store-pricing-section {
  margin-top: 100px !important;
  /* お水の購入方法の上部にスペース追加 */
}

.promo-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* ギャップを20pxに設定 */
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.promo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 20px 20px;
  /* パディングを20pxに設定 */
  overflow: hidden;
  /* 背景のはみ出し防止 */
  isolation: isolate;
  /* z-index管理 */
  gap: 2%;
  /* 間隔をさらに詰める (5% -> 2%) */
}

/* 偶数番目のテキストを右寄せに */
.promo-item:nth-child(even) .promo-text-group {
  text-align: right;
}

/* 奇数番目（1, 3）のテキストを左寄せに（明示的に指定） */
.promo-item:nth-child(odd) .promo-text-group {
  text-align: left;
}

/* 偶数番目は左右反転（ジグザグレイアウト） */
.promo-item:nth-child(even) {
  flex-direction: row-reverse;
}

.promo-visual {
  width: 52%;
  /* 45% -> 52% に拡大 */
  max-width: 550px;
  /* 400px -> 550px に拡大 */
  position: relative;
}

/* --- 背景の英語キーワード --- */
.promo-bg-text {
  position: absolute;
  top: 50%;
  /* 中央に戻す (80% -> 50%) */
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8rem;
  font-weight: 900;
  color: rgba(74, 93, 153, 0.05);
  /* 極薄い青 */
  white-space: nowrap;
  z-index: -1;
  font-family: Impact, sans-serif;
  pointer-events: none;
  letter-spacing: 0.05em;
}

/* --- 水しぶき効果（Blobs） --- */
.promo-item::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(234, 244, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  z-index: -1;
  filter: blur(20px);
}

/* アイテムごとの装飾配置 */
.promo-item:nth-child(1)::before {
  top: -50px;
  left: -50px;
  width: 400px;
  height: 400px;
}

/* 2番目の画像（配達）の調整 */
.promo-item:nth-child(2) .promo-visual {
  width: 52%;
  /* 横幅を少し広げる */
  max-width: 550px;
}



/* 2番目のテキスト位置を少し上に（PC専用） */
@media (min-width: 768px) {
  .promo-item:nth-child(2) .promo-text-group {
    transform: translateY(-80px);
  }

  /* 2と3の間の隙間を縮める */
  .promo-item:nth-child(3) {
    margin-top: -40px;
  }

  /* 1と2の間の隙間を広げる */
  .promo-item:nth-child(2) {
    margin-top: 60px;
  }
}



/* 1つ目のアイテム（SHOP）だけ背景文字を少し左に */
.promo-item:nth-child(1) .promo-bg-text {
  left: 47%;
  /* 47% に再設定 */
}

/* 2つ目のアイテム（DELIVERY）だけ背景文字を右に */
.promo-item:nth-child(2) .promo-bg-text {
  left: 63%;
  /* 63% に微調整 */
}

/* 3つ目のアイテム（SERVER）だけ背景文字を少し左に */
.promo-item:nth-child(3) .promo-bg-text {
  left: 42%;
  /* 42% に設定 */
}

.promo-item:nth-child(2)::before {
  bottom: -50px;
  right: -50px;
  background: radial-gradient(circle, rgba(255, 230, 230, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
}

/* 赤っぽい */
.promo-item:nth-child(3)::before {
  top: 20%;
  right: 20%;
  width: 500px;
  height: 500px;
}


.promo-text-group {
  flex: 1;
  padding: 0 40px;
  position: relative;
}

.promo-label {
  display: inline-block;
  color: #4a5d99;
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 5px;
  /* border-bottom removed */
}

.promo-label.red {
  color: #e74c3c;
  /* border-color: #e74c3c; removed */
}

.promo-title {
  font-size: 2.4rem;
  /* 1リットルなどを少し小さく (3.2rem -> 2.4rem) */
  font-weight: 800;
  color: #0075c2;
  /* 少し濃いめの青（信頼感・視認性UP）に変更 */
  line-height: 1.4;
  margin: 10px 0 20px;
  letter-spacing: -0.02em;
  text-shadow: 2px 2px 0 #fff;

  /* 青い縦線強制削除 */
  border-left: none !important;
  padding-left: 0 !important;
  background: none !important;

  /* 下線追加（ここに戻す） */
  display: inline-block;
  border-bottom: 4px solid #4a5d99;
  /* 濃い青のボーダー */
  padding-bottom: 5px;
}

.promo-title::before,
.promo-title::after {
  content: none !important;
  display: none !important;
}

.promo-label {
  border: none !important;
  background: none !important;
  /* 万が一の背景線も削除 */
}

.promo-title span {
  color: #e74c3c;
  /* ここだけ赤に戻す（インパクト重視） */
  font-size: 5.2rem;
  /* 30円などをさらに大きく (4.2rem -> 5.2rem) */
  font-family: "Noto Sans JP", sans-serif;
  margin: 0 5px;
  display: inline-block;
  transform: rotate(-2deg);
  /* 少し傾けて動きを出す */
  line-height: 1;
  /* 行間が開かないように詰める */
  letter-spacing: 0.1em;
  /* 文字間を広げる */
}

.promo-title small {
  font-size: 1.4rem;
  color: #333;
}

.promo-description {
  font-size: 1.3rem;
  color: #1a3452;
  /* 上の青(#0075c2)と調和する濃いネイビーに変更 */
  line-height: 1.8;
  margin-bottom: 25px;
  font-weight: 500;
  /* 少しだけ太く */
}

.promo-btn {
  display: inline-flex;
  align-items: center;
  background: #4a5d99;
  color: #fff !important;
  /* 強制的に白にする */
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(74, 93, 153, 0.3);
}

.promo-btn:hover {
  background: #39487a;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(74, 93, 153, 0.4);
}

.promo-btn::after {
  content: "→";
  margin-left: 10px;
  transition: transform 0.3s;
}

.promo-btn:hover::after {
  transform: translateX(5px);
}

/* ラベルとボタンを横並びにするコンテナ */
.promo-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
}

/* 偶数番目は右寄せレイアウトなので並び順も調整 */
.promo-item:nth-child(even) .promo-actions {
  justify-content: flex-end;
}

/* ラベルのスタイル調整（横並び用） */
.promo-label {
  margin-bottom: 0;
  /* 下マージン削除 */
  font-size: 1.1rem;
  /* 1.0rem -> 1.1rem に少し大きく */
  background: #f0f4ff;
  /* 薄い背景でボタンっぽく */
  padding: 8px 15px;
  border-radius: 4px;
  color: #4a5d99 !important;
  /* 色を統一（赤や他の色が混ざらないように） */
  font-weight: bold;
}

.promo-label.red {
  background: #ffeaea;
  color: #4a5d99 !important;
  /* 赤ラベルも文字色は青に統一 */
}



/* 画像の装飾（blob shape） */




@media (max-width: 767px) {
  .promo-list {
    gap: 40px;
  }

  .promo-item,
  .promo-item:nth-child(even) {
    flex-direction: column-reverse;
    text-align: center;
    padding: 20px 0;
  }

  .promo-bg-text {
    font-size: 4rem;
    opacity: 0.1;
  }

  .promo-text-group {
    padding: 20px 0 0;
  }

  .promo-visual {
    width: 80%;
    max-width: 300px;
  }

  .promo-title {
    font-size: 2.2rem;
    /* スマホも少し大きく */
  }

  .promo-title span {
    font-size: 2.8rem;
  }
}

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

  html body .mv__hero-text.hero-text-slide2 .mv__hero-title,
  html body .mv__hero-text.hero-text-slide2 .mv__hero-title-line {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

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

  /* 使われていないmobileNavとheader__mobile-navのスタイルを削除 - header__drawerに統一 */
}

/* ==============================================
   標準レイアウト設定 (Standard Layout Spacing)
   PC: 100px / SP: 50px で統一
   ============================================== */
.layout-news,
.layout-features,
.layout-campaign,
.layout-comparison,
.layout-water-refill,
.layout-page-top,
.layout-reason,
.layout-product-top,
.layout-instagram,
.layout-shop-howtobuy,
.layout-step,
.layout-howtouse,
.layout-qa-shop,
.layout-shop,
.layout-delivery,
.layout-structure,
.layout-ingredients,
.layout-water-shop,
.layout-inquiry-shop {
  margin-top: 100px !important;
  padding-top: 0 !important;
  /* コンポーネント側のpaddingをリセット */
}

@media (max-width: 768px) {

  .layout-news,
  .layout-features,
  .layout-campaign,
  .layout-comparison,
  .layout-water-refill,
  .layout-page-top,
  .layout-reason,
  .layout-product-top,
  .layout-instagram,
  .layout-shop-howtobuy,
  .layout-step,
  .layout-howtouse,
  .layout-qa-shop,
  .layout-shop,
  .layout-delivery,
  .layout-structure,
  .layout-ingredients,
  .layout-water-shop,
  .layout-inquiry-shop {
    margin-top: 50px !important;
    padding-top: 0 !important;
  }

  .layout-shop {
    padding-bottom: 0px;
    margin-top: 0 !important;
  }
}


/* ==========================================================================
   見出し・セクションタイトルの統合管理 (Unified Heading Management)
   ========================================================================== */

/* 1. 見出しの共通デザイン (Color & Gradient)
   -------------------------------------------------------------------------- */
.features__title,
.section-title,
.title,
.news__title,
.comparison__title,
.page-top__title,
.product-list__title,
.instagram__title {
  background: linear-gradient(135deg, #1d2088 0%, #4a5dc9 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  text-align: center !important;
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.1em !important;
  font-family: "Noto Sans JP", sans-serif !important;
  padding-top: 25px;
  padding-bottom: 25px;
  /* フォールバック対策 */
}

/* 2. 見出しの上下余白 & フォントサイズ (Spacing & Size)
   -------------------------------------------------------------------------- */
/* --- PC Layout --- */
.news__title,
.features__title,
.comparison__title,
.page-top__title,
.product-list__title,
.instagram__title,
.section-title,
.title {
  margin-top: 0 !important;
  margin-bottom: 60px !important;
}

/* --- SP Layout (Mobile) --- */
@media (max-width: 768px) {

  .features__title,
  .section-title,
  .title,
  .news__title,
  .comparison__title,
  .page-top__title,
  .product-list__title,
  .instagram__title {
    font-size: 1.4rem !important;
    /* スマホ版の文字サイズ統一 */
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    /* PCの半分 */
  }
}

/* 3. 例外・調整 (Exceptions)
   -------------------------------------------------------------------------- */
/* ヒーロースライド2: グラデーションを除外して「白文字＋影」にする */
.mv__hero-text.hero-text-slide2 .mv__hero-title {
  background: none !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: initial !important;
  background-clip: border-box !important;
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

/* ==========================================================================
   Store Page Unique Styles (Migrated from HTML)
   ========================================================================== */

/* Benefits Grid */
.store-benefits .benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  /* Increased gap for cards */
  margin-top: 0;
  box-sizing: border-box;
  width: 100%;
}

.benefit-item {
  background: #fff;
  border: 1px solid #eef9fc;
  border-radius: 24px;
  padding: 35px 25px;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 4px 15px rgba(225, 235, 245, 0.4);
  position: relative;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.benefit-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(29, 32, 136, 0.1);
  border-color: #dceef9;
}

.benefit-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;
  background: #f4fbfe;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease;
}

.benefit-item:hover .benefit-icon {
  transform: scale(1.1) rotate(5deg);
  background: #e6f6fd;
}

.benefit-icon img {
  width: 55px;
  height: auto;
  object-fit: contain;
}

.benefit-item h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1d2088;
  /* Brand blue */
  margin: 0 0 15px 0;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.benefit-item p {
  font-size: 1rem;
  line-height: 1.8;
  color: #556b8d;
  font-weight: 500;
  margin: 0;
  flex-grow: 1;
}

@media (max-width: 1024px) {
  .store-benefits .benefits-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 767px) {
  .store-benefits .benefits-grid {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
  }

  .benefit-item {
    padding: 30px 20px;
    border-radius: 20px;
  }

  .benefit-item h3 {
    font-size: 1.3rem !important;
    text-align: center !important;
    padding-left: 0 !important;
    background: none !important;
    margin-bottom: 15px !important;
  }
}

/* Recommended Grid */
.recommended-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 0;
  box-sizing: border-box;
  width: 100%;
}

.recommended-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 40px;
  background: #e8ebf7;
  border-radius: 50px;
  box-sizing: border-box;
}

.recommended-item span {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #2c3e94;
  margin-right: 15px;
  flex-shrink: 0;
}

.recommended-item p {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  padding: 0;
  color: #2c3e94;
  /* font-family inherit from body/h2 */
  line-height: 1.5;
}

@media (max-width: 768px) {
  .recommended-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .recommended-item {
    padding: 25px 30px !important;
  }

  .recommended-item p {
    font-size: 1.1rem !important;
  }
}

/* Pricing Grid */
.pricing-grid {
  display: flex;
  justify-content: center;
  gap: 30px;
  box-sizing: border-box;
  width: 100%;
}

@media (max-width: 768px) {
  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 30px;
  }
}

.pricing-item {
  display: block;
  text-align: center;
  box-sizing: border-box;
}

.pricing-item img {
  display: block !important;
  width: 200px !important;
  height: 200px !important;
  margin: 0 auto 20px !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  overflow: hidden !important;
}

/* H3 - Unified Design */
.pricing-item h3,
.benefit-item h3 {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 15px 0;
  padding: 0 0 10px 0;
  color: #000 !important;
  line-height: 1.5;
  text-align: center;
  position: relative;
  border: none !important;
  background-image: none !important;
  background: none !important;
  padding-left: 0 !important;
}

.pricing-item p {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  margin: 0;
  padding: 0;
  color: #2c3e94;
  text-align: center;
}

@media (max-width: 1024px) {
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 50px !important;
  }
}

/* ==========================================================================
   Store List Mobile Styles (Migrated from HTML)
   ========================================================================== */

/* 見出しデザインの修正（全セクション共通） */
@media (max-width: 768px) {

  .shop__list--hierarchy {
    display: block !important;
    padding: 0 10px !important;
  }

  .shop__map-mobile img {
    width: calc(100% + 60px);
    max-width: none;
    margin-left: -30px;
    margin-right: -30px;
  }

  .howtobuy__wrapper .shop__content .shop__map-mobile img {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }


  /* 地域見出し（中部・南部） */
  .shop__list-region {
    width: 100% !important;
    margin-bottom: 40px !important;
    text-align: center !important;
  }

  .shop__list-region-name {
    display: block !important;
    font-size: 1.4rem !important;
    font-weight: bold !important;
    color: #2c3e94 !important;
    border-bottom: 2px solid #2c3e94;
    padding-bottom: 10px;
    margin-bottom: 0;
  }

  .shop__list-city {
    padding-left: 0 !important;
    list-style: none !important;
    margin: 0 !important;
  }

  /* 市町村ごとの行 */
  .shop__list-city-item {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0 !important;
  }

  /* 市町村名 */
  .shop__list-city-name {
    display: inline-block !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    color: #2c3e94 !important;
    margin-bottom: 5px;
    margin-right: 15px;
    padding-left: 0 !important;
    border-left: none !important;
    flex-shrink: 0;
    min-width: 80px;
    /* 少し幅を持たせる */
    position: relative;
  }

  /* 三角アイコン */
  .shop__list-city-name::before {
    content: "▶";
    font-size: 0.6em;
    margin-right: 6px;
    color: #2c3e94;
    vertical-align: middle;
  }

  /* 店舗リストラッパー */
  .shop__list-store {
    display: flex !important;
    flex-wrap: wrap !important;
    padding-left: 0 !important;
    margin: 0 !important;
    gap: 0 15px !important;
    /* 横方向の隙間 */
    flex-grow: 1;
  }

  /* 店舗アイテム */
  .shop__list-store-item {
    display: inline-block !important;
    margin-bottom: 5px !important;
  }

  /* 店舗リンク */
  .shop__list-store-item a {
    display: inline-block !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    text-align: left !important;
    color: #0066cc !important;
    /* リンク色 */
    text-decoration: none;
    font-size: 1rem;
  }

  .shop__list-store-item a::before {
    content: "・";
    color: #999;
    margin-right: 2px;
  }

  .shop__list-store-item a:hover {
    text-decoration: underline !important;
    background: none !important;
  }
}

/* ==========================================================================
   Store Trust/Support Section (Migrated from Inline Styles)
   ========================================================================== */
.trust-grid {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 40px;
  align-items: start;
}

.trust-content {
  background: #fff;
  border: 2px dashed #d0d3d9;
  padding: 18px 18px 0;
}

.trust-content .secLead {
  margin: 0 0 16px;
}

.trust-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0 30px;
  line-height: 1.7;
  text-align: left;
}

.trust-list li {
  padding: 12px 14px;
}

.trust-list li:not(:last-child) {
  border-bottom: 2px dashed #d0d3d9;
}

.trust-image img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius, 20px);
  object-position: center 15%;
}

@media (max-width: 768px) {
  .trust-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* 画像を上に表示 */
  .trust-image {
    order: -1;
    margin-bottom: 20px;
  }

  .trust-image img {
    border-radius: 20px !important;
  }

  /* テキストボックスのデザイン修正 */
  .trust-content {
    text-align: center !important;
    padding: 30px 20px !important;
  }

  .trust-content .secLead {
    text-align: center !important;
    margin-bottom: 30px !important;
  }

  .trust-list {
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .trust-list li {
    text-align: center !important;
    justify-content: center !important;
    padding: 15px 10px !important;
  }
}

/* =========================================
   Promo List Styles (Ported from index.html)
   ========================================= */

.promo-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.promo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 20px 20px;
  overflow: hidden;
  isolation: isolate;
  gap: 2%;
}

/* Even item: text right, row-reverse */
.promo-item:nth-child(even) .promo-text-group {
  text-align: right;
}

.promo-item:nth-child(odd) .promo-text-group {
  text-align: left;
}

.promo-item:nth-child(even) {
  flex-direction: row-reverse;
}

.promo-visual {
  width: 52%;
  max-width: 550px;
  position: relative;
}

/* Minimal background text */
.promo-bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8rem;
  font-weight: 900;
  color: rgba(74, 93, 153, 0.05);
  white-space: nowrap;
  z-index: -1;
  font-family: Impact, sans-serif;
  pointer-events: none;
  letter-spacing: 0.05em;
}

/* Blobs */
.promo-item::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(234, 244, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  z-index: -1;
  filter: blur(20px);
}

.promo-item:nth-child(1)::before {
  top: -50px;
  left: -50px;
  width: 400px;
  height: 400px;
}

.promo-item:nth-child(2)::before {
  bottom: -50px;
  right: -50px;
  background: radial-gradient(circle, rgba(255, 230, 230, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
}

.promo-text-group {
  flex: 1;
  padding: 0 40px;
  position: relative;
}

.promo-label {
  display: inline-block;
  color: #4a5d99;
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 5px;
  background: #f0f4ff;
  padding: 8px 15px;
  border-radius: 4px;
}

.promo-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #0075c2;
  line-height: 1.4;
  margin: 10px 0 20px;
  letter-spacing: -0.02em;
  text-shadow: 2px 2px 0 #fff;
  display: inline-block;
  border-bottom: 4px solid #4a5d99;
  padding-bottom: 5px;
}

.promo-title span {
  color: #e74c3c;
  font-size: 3.8rem;
  font-family: "Noto Sans JP", sans-serif;
  margin: 0 5px;
  display: inline-block;
  transform: rotate(-2deg);
  line-height: 1;
  letter-spacing: 0.1em;
}

.promo-description {
  font-size: 1.3rem;
  color: #1a3452;
  line-height: 1.8;
  margin-bottom: 25px;
  font-weight: 500;
}

.promo-btn {
  display: inline-flex;
  align-items: center;
  background: #4a5d99;
  color: #fff !important;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(74, 93, 153, 0.3);
}

.promo-btn:hover {
  background: #39487a;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(74, 93, 153, 0.4);
}

.promo-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
}

.promo-item:nth-child(even) .promo-actions {
  justify-content: flex-end;
}



/* Mobile Responsive */
@media (max-width: 767px) {
  .promo-list {
    gap: 40px;
  }

  .promo-item,
  .promo-item:nth-child(even) {
    flex-direction: column-reverse;
    /* Text bottom, Image top? index.html had column-reverse which means Image on Top (since visual is 2nd child in HTML) */
    /* Check HTML order: bg-text, text-group, visual. column-reverse -> visual, text-group, bg-text. So Visual on TOP. */
    text-align: center;
    padding: 20px 0;
  }

  .promo-bg-text {
    font-size: 4rem;
    opacity: 0.1;
  }

  .promo-text-group {
    padding: 20px 0 0;
  }

  .promo-item:nth-child(even) .promo-text-group,
  .promo-item:nth-child(odd) .promo-text-group {
    text-align: center;
  }

  .promo-visual {
    width: 80%;
    max-width: 300px;
    margin: 0 auto;
  }

  .promo-actions {
    justify-content: center;
  }

  .promo-item:nth-child(even) .promo-actions {
    justify-content: center;
  }

  .promo-title {
    font-size: 1.6rem;
  }

  .promo-title span {
    font-size: 2.4rem;
  }
}

/*! #######################################################################

	MeanMenu 2.0.7
	--------

	To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/)

####################################################################### */

/* hide the link until viewport size is reached */
a.meanmenu-reveal {
  display: none;
}

/* when under viewport size, .mean-container is added to body */
.mean-container .mean-bar {
  float: left;
  width: 100%;
  position: relative;
  /*background: #0c1923;*/
  padding: 4px 0;
  min-height: 42px;
  z-index: 999999;
  position: fixed;
}


.mean-container a.meanmenu-reveal {
  width: 22px;
  height: 35px;
  padding: 24px 13px 11px 13px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  text-indent: -9999em;
  line-height: 22px;
  font-size: 1px;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  background-color: #3dc8f3;

}

.mean-container a.meanmenu-reveal span {
  display: block;
  background: #ffffff;
  height: 3px;
  margin-top: 3px;
}

.mean-container .mean-nav {
  float: left;
  width: 100%;
  background: #3dc8f3;
  margin-top: 66px;
}

.mean-container .mean-nav ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
}

.mean-container .mean-nav ul li {
  position: relative;
  float: left;
  width: 100%;
}

.mean-container .mean-nav ul li a {
  display: block;
  float: left;
  width: 90%;
  padding: 12px 5%;
  margin: 0;
  text-align: center;
  color: #ffffff;
  border-top: 1px solid #383838;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
}

.mean-container .mean-nav ul li li a {
  width: 80%;
  padding: 10px 10%;
  border-top: 1px solid #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.25);


  text-shadow: none !important;
  visibility: visible;
  font-weight: normal;
}

.mean-container .mean-nav ul li.mean-last a {
  border-bottom: none;
  margin-bottom: 0;
}

.mean-container .mean-nav ul li li li a {
  width: 70%;
  padding: 1em 15%;
}

.mean-container .mean-nav ul li li li li a {
  width: 60%;
  padding: 1em 20%;
}

.mean-container .mean-nav ul li li li li li a {
  width: 50%;
  padding: 1em 25%;
}

.mean-container .mean-nav ul li a:hover {
  background: #252525;
  background: rgba(255, 255, 255, 0.1);
}

.mean-container .mean-nav ul li a.mean-expand {
  margin-top: 1px;
  width: 26px;
  height: 24px;
  padding: 12px !important;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
  border: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
  background-color: rgba(24, 106, 171, 0.90);
}

.mean-container .mean-push {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
  clear: both;
}

.mean-nav .wrapper {
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Fix for box sizing on Foundation Framework etc. */
.mean-container .mean-bar,
.mean-container .mean-bar * {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}


.mean-remove {
  display: none !important;
}

@charset "utf-8";
/* --------------------------------------------------
レスポンシブ　
-------------------------------------------------- */
/* 共通 */
@media screen and (min-width: 769px) {

  /*********PCで非表示*********/
  .pcnone {
    display: none;
  }

  .pcon {
    display: block;
  }

  .br-pc {
    display: none;
  }
}

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

  /*********スマホで非表示*********/
  .spnone {
    display: none;
  }

  /*ヘッダー*/
  #header {
    display: none;
  }

  .br-sp {
    display: none;
  }

  /*フッター*/
  .pagetop2 {
    /* display: none; */
  }

  /*********スマホで表示*********/
  .spon {
    display: block;
  }

  #bx-pagerSP {
    display: block;
  }
}

/* 画面サイズが480px以下の場合に適用 */
@media screen and (max-width: 480px) {

  /*お知らせfloat設定*/
  .fLLBox {
    float: left;
    width: 100%;
    margin-right: 0;
  }

  .fLLBox img {
    width: 80%;
    margin-left: 10%;
  }
}

/* 画面サイズが768px以下の場合に適用 */
@media screen and (max-width: 768px) {

  /* 全体 */
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  body {
    min-width: 100%;
    margin: 0px;
    font-size: 14px;
  }

  html,
  body {
    width: 100%;
  }

  .allpadding {
    padding: 0 2%;
  }

  textarea {
    width: 100%;
  }

  input.check01 {
    width: auto;
  }

  .styled p {
    padding-right: 5px;
    padding-left: 5px;
  }

  .br-sp {
    display: none;
  }

  /*********width指定解除**********/
  #gnaviInner,
  #headerInner,
  #footerInner,
  .styled,
  #main,
  #contentsInner {
    width: 100% !important;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* header */
  #maincontainer {
    background-image: none;
  }

  #header_position {
    position: fixed;
    height: 70px;
    z-index: 1100;
    left: 0px;
    right: 0px;
    background-color: hsla(0, 0%, 100%, 0.9);
  }

  #header {}

  #headerInner {}

  #headerSPLogo {
    z-index: 999999;
    width: 40%;
    top: 16px;
    left: 5px;
    position: fixed;
  }

  .headerSPbtn {
    z-index: 999999;
    position: fixed;
    width: 42%;
    top: 12px;
    right: 56px;
  }

  .headerSPbtn img {
    width: 100%;
  }

  /*.footerbtn {
    position: fixed;
    height:90px;
    z-index: 1100;
    left: 0px;
    right: 0px;
    background-color: hsla(0,0%,100%,0.90);
    bottom: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.footerbtn img{
    width: 96%;  
}*/
  #gnavi {
    margin-right: auto;
    margin-left: auto;
    background-image: none;
    width: 100%;
    height: 0px;
    background-color: none;
  }

  #gnaviInner {
    background-image: none;
  }

  /* nav {
    margin-top: 50px;
    position: fixed !important;
  } */
  /* フッター
------------------------------ */
  #footer {
    margin-bottom: 50px;
    margin-top: 10px;
    font-size: 14px;
    line-height: 120%;
    padding-top: 2px;
  }

  #footer .sitemapnavi {
    padding-top: 10px;
    font-size: 13px;
    text-align: center;
    line-height: 120%;
    padding-bottom: 0px;
    padding-left: 0px;
    width: 100%;
  }

  #footer a {
    background-image: none;
    padding-left: 20px;
    margin-right: 20px;
    display: inline-block;
  }

  .copyright {
    padding-bottom: 10px;
    padding-top: 10px;
    font-size: 10px;
  }

  /*********その他個別指定*********/
  #contents {
    margin-top: 10px;
    padding-bottom: 0px;
    padding-top: 0px;
    position: relative;
  }

  .contentsInner {
    width: 100%;
    margin-bottom: 10px;
    padding: 0 2%;
    max-width: 1150px;
    padding-left: 25px;
    padding-right: 25px;
    margin-right: auto;
    margin-left: auto;
  }

  .content {
    margin-top: 70px;
  }

  .content .mainimgInner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }

  .content .imgtxt {
    position: absolute;
    left: 10px;
    top: 5px;
    z-index: 100;
    width: 80%;
  }

  .imgC {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 100%;
    display: block;
  }

  /* index.html
------------------------------ */
  /*タブ切り替え全体のスタイル*/
  #tub {
    margin-top: 10px;
  }

  .tabs {
    width: 100%;
  }

  /*タブのスタイル*/
  .tab_item {
    width: calc(100% / 1);
    height: auto;
    border-bottom: 0px solid #01b3cd;
    line-height: 150%;
    font-size: 18px;
    padding-bottom: 15px;
  }

  .top_youki {
    width: 100%;
    margin: 0 0 15px 0;
  }

  .top_youki img {
    width: 100%;
  }

  .kakuyasu {}

  .kakuyasu img.spnone {
    display: none;
  }

  .kakuyasu img.pcnone {
    margin: 0;
    padding: 0;
    display: block;
  }

  .kakuyasu .kakuyasu_gal img {
    width: 100%;
    margin: 10px 0 0;
  }

  .kakuyasu .kakuyasu_gal {
    padding: 10px;
  }

  .kakuyasu .btn {
    width: 100%;
  }

  /*来店*/
  .raiten li {
    background-image: url(../img/ico_arrows01.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 25px;
    text-align: left;
    margin-left: 100px;
  }

  .takuhai li {
    background-image: url(../img/ico_arrows01.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 25px;
    text-align: left;
    margin-left: 60px;
    margin-bottom: 10px;
  }

  /*トップレンタル商品*/
  .rental .flexarea div.img {
    margin: 0 auto;
    width: 50%;
  }

  .rental .flexarea div.text {
    width: 100%;
    margin-left: 0;
  }

  .rental .flexarea div.text dl.flexarea {
    flex-direction: column;
  }

  .rental .flexarea div.text dl dt,
  .rental .flexarea div.text dl dd {
    width: 100%;
  }

  /*セカンドページ お水の配達店舗*/
  .telBox01 li {
    background-image: url(../img/ico_arrows01.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 25px;
    text-align: left;
    margin-left: 20px;
    margin-bottom: 10px;
    list-style-type: none !important;
  }

  /*セカンドページ お水の配達店舗*/
  .takuhaiBox002 li {
    background-image: url(../img/ico_arrows01.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 25px;
    text-align: left;
    margin-left: 20px;
    margin-bottom: 10px;
    list-style-type: none !important;
  }

  /*--------------------------*/
  .flexarea div,
  .flexarea02 div {
    width: 100%;
  }

  .flexarea div img,
  .flexarea02 div img {
    width: 100%;
  }

  .telBox01 .flexarea div,
  .telBox01 .flexarea02 div {
    width: 100%;
    margin: 0 0 20px 0;
  }

  .telBox01 .flexarea div:nth-child(3n),
  .telBox01 .flexarea02 div:nth-child(3n) {
    width: 100%;
  }

  .telBox01 .flexarea div img,
  .telBox01 .flexarea02 div img {
    width: 100%;
  }

  /*--------------------------*/
  /*配達*/
  .takuhai {
    position: relative;
    height: auto;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .takuhai .section div {
    width: 100%;
  }

  .takuhai .section img {
    width: 90%;
    margin: 0 auto;
  }

  .takuhaiBox {
    width: 100%;
    margin-top: 30px;
  }

  .takuhaiBox001 {
    float: none;
  }

  .takuhaiBox002 {
    float: none;
  }

  .takuhaiBox003 {
    float: none;
  }

  .takuhaiBox004 {
    float: none;
    margin-top: 2px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .takuhaiBox005 {
    float: none;
  }

  .takuhaitxt {
    font-size: 18px;
    font-weight: bold;
    color: #00a1e9;
    text-align: center;
    padding-top: 10px;
    line-height: 180%;
  }

  /*こだわり*/
  .kodawari {
    padding-bottom: 25px;
    background-color: #c9ecf2;
  }

  .kodawari .title {
    padding-top: 20px;
    margin-bottom: 20px;
  }

  .kodawari .kodawariBox {
    font-size: 14px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 45%;
  }

  /*商品のご案内*/
  .item {
    padding-bottom: 25px;
    background-color: #f7fdfd;
  }

  .item .title {
    background-image: none;
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 20px;
    margin-bottom: 20px;
  }

  .item .itemBox {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }

  .item .itemBox img {
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
  }

  .item .itembtn a {
    color: #ffffff;
    font-size: 16px;
    background-color: #00a1e9;
    border-radius: 4px;
    display: block;
    width: 90%;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-left: auto;
    margin-right: auto;
  }

  /*お客様の声*/
  .voice {
    padding-bottom: 20px;
  }

  .voice .title {
    padding-top: 20px;
    background-image: none;
  }

  .voice .voiceBox {
    width: 100%;
  }

  .voice .voiceBox img {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .voice .voiceBox p {
    margin-bottom: 10px;
    text-align: left;
  }

  .img_indexraiten004 {
    width: 100%;
    margin: 0 auto;
    padding: 30px;
  }

  .img_indexraiten004 p {
    width: 100%;
    font-size: 20px;
    color: #00a5e5;
    line-height: 42px;
    font-weight: bold;
    text-align: left;
    padding: 10px 0;
  }

  .img_indexraiten004 img {
    width: 90%;
    text-align: center;
    float: none;
  }

  .bgindexraiten {
    background-color: #fbf9e0;
    padding: 0px 10px 15px;
    margin: 0 0 60px;
  }

  /*********セカンド********/
  #mainimg2nd01 {
    margin-top: 70px;
  }

  #mainimg2nd02 {
    background-image: url(../img/category/bg_h2.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 48px;
  }

  .styled h2 {
    position: relative;
    font-size: 18px;
  }

  .styled h3 {
    font-size: 18px;
  }

  .styled h4 {
    font-size: 16px;
    margin-top: 20px;
  }

  .styled {
    font-size: 14px;
    padding-right: 2%;
    padding-left: 2%;
  }

  .styled .section {
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 10px;
    position: relative;
  }

  .styled .section02 {
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    padding-bottom: 30px;
    position: relative;
  }

  .table {
    margin: 0px;
    width: 100%;
  }

  .table th,
  .table td {
    width: 100%;
    display: block;
    border-top: none;
  }

  .table_shop {
    width: 100% !important;
    float: none !important;
  }

  .table_shop th,
  .table_shop td {
    width: 100%;
    display: block;
    border-top: none;
  }

  .table_waku {
    width: 100% !important;
    float: none !important;
  }

  .table_waku th,
  .table_waku td {
    width: 100%;
    display: block;
    border-top: none;
  }

  .sitemap ul.box01 {
    margin-left: 0px;
  }

  .telBox01 {
    margin-bottom: 20px;
    border: 5px solid #efefef;
    text-align: center;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .photoBox01 {
    margin-bottom: 20px;
    border: 1px solid #c1c2f4;
    text-align: center;
    width: 98%;
    padding: 1%;
  }

  .photoBox01 img {
    width: auto;
  }

  /* 店舗紹介*/
  .shopBox01 {
    width: 100%;
    float: left;
    text-align: center;
    margin-bottom: 30px;
  }

  .shopBox01 img {
    max-width: 100%;
  }

  .shop_infoBox {
    border: #00a3e1 3px solid;
    padding: 15px;
    margin: 20px 0 0 0;
    clear: both;
  }

  .shop_infoBox p {
    color: #00a3e1;
    font-weight: 600;
    text-align: center;
  }

  .shop_infoBox dl div {
    border-bottom: solid 1px #eeeeee;
    margin: 15px 0;
  }

  .shop_infoBox dt {
    width: 100%;
  }

  .shop_infoBox dt::after {
    content: "　";
  }

  .text-divider {
    display: flex;
    align-items: center;
    color: #1d2088;
    font-size: 1.3rem;
    font-weight: 800;
  }

  .text-divider::before,
  .text-divider::after {
    content: "";
    height: 4px;
    background-color: #009fe5;
    flex-grow: 1;
  }

  .text-divider::before {
    margin-right: 1rem;
  }

  .text-divider::after {
    margin-left: 1rem;
  }

  ul.area_btn {
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: stretch;
    margin: 0 0 30px 0;
    padding: 0;
  }

  ul.area_btn li {
    display: block;
    list-style: none;
    text-decoration: none;
    background: #00a3e1;
    border-radius: 6px;
    width: 45%;
    padding: 15px 0;
    margin: 10px 5px;
  }

  ul.area_btn li a {
    display: block;
    color: #fff;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
  }

  ul.area_btn li a:active,
  ul.area_btn li a:hover,
  ul.area_btn li a:visited {
    display: block;
    color: #fff;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
  }

  ul.shop_btn {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    margin: 0 0 30px 0;
    padding: 0;
  }

  ul.shop_btn li {
    display: block;
    list-style: none;
    justify-content: center;
    text-decoration: none;
    background: #dcf4ff;
    border-radius: 6px;
    width: 30%;
    padding: 15px 0;
    margin: 5px;
  }

  ul.shop_btn li a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #00a3e1;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
  }

  ul.shop_btn li a:active,
  ul.shop_btn li a:hover,
  ul.shop_btn li a:visited {
    display: block;
    color: #00a3e1;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
  }

  .shopListBox {
    margin: 0 0 50px 0;
  }

  /* リンク設定*/
  #lineup_a00,
  #lineup_a01,
  #lineup_a02,
  #lineup_a03,
  #lineup_a04 {
    margin-top: -80px;
    padding-top: 80px;
  }

  #a1,
  #a2,
  #a3,
  #a4,
  #a5,
  #a6,
  #a7,
  #a8,
  #a9,
  #a10,
  #a11,
  #a12,
  #a13,
  #a14,
  #a15,
  #a16 {
    margin-top: -80px;
    padding-top: 80px;
  }

  /* Hide embedded Google Maps on mobile - shop.html */
  .shop-map-embed,
  .table_shop iframe,
  .table_shop td iframe,
  td[rowspan] iframe {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    overflow: hidden !important;
  }

  /* Location container: left-right layout on mobile */
  .location-container {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
  }

  .location-address {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .location-map {
    flex-shrink: 0 !important;
  }

  .location-map .pricing-tab {
    white-space: nowrap !important;
    font-size: 0.85rem !important;
    padding: 6px 10px !important;
  }

  /* Center align phone number, business hours, and store details on mobile */
  .table_shop td {
    text-align: center !important;
  }

  /* Keep location container left-aligned */
  .table_shop td .location-container {
    text-align: left !important;
  }

  /* Remove space between store image and table on mobile */
  .shopBox01.pb50,
  .shopBox01.pb30 {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .swiper_thum.pb50 {
    padding-bottom: 0 !important;
  }

  .shopBox01 {
    margin-bottom: 0 !important;
  }
}
/* Mobile Overflow Fix */
@media (max-width: 767px) {
  html, body {
    width: 100%;
    min-width: 0 !important;
    overflow-x: hidden;
  }
  .header__inner,
  .sub-mv__inner,
  .howtobuy__wrapper,
  .howtobuy-delivery__wrapper,
  .wrapper,
  .container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

@media (max-width: 767px) {
  .inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}