@charset "UTF-8";

/*--------------------------------------
リセットCSS
--------------------------------------*/
*, ::before, ::after {-webkit-box-sizing: border-box; box-sizing: border-box; border-style: solid; border-width: 0;}html { line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;}body { margin: 0;}main { display: block;}p, table, blockquote, address, pre, iframe, form, figure, dl { margin: 0;}h1, h2, h3, h4, h5, h6 { font-size: inherit; margin: 0;}ul { margin: 0; padding: 0; list-style: none;}ol {margin: 0;margin-left: 1.3em;padding: 0;}dt { font-weight: 500;}dd { margin-left: 0;}hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; border-top-width: 1px; margin: 0; clear: both; color: inherit;}pre { font-family: monospace, monospace; font-size: inherit;}address { font-style: inherit;}a { background-color: transparent; text-decoration: none; color: inherit;}abbr[title] { -webkit-text-decoration: underline dotted;text-decoration: underline dotted;}code, kbd, samp { font-family: monospace, monospace; font-size: inherit;}small { font-size: 80%;}sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}sub { bottom: -0.25em;}sup { top: -0.5em;}svg, img, embed, object, iframe { vertical-align: bottom;}button, input, optgroup, select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: middle; color: inherit; font: inherit; background: transparent; padding: 0; margin: 0; border-radius: 0; text-align: inherit; text-transform: inherit;}[type=checkbox] { -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox;}[type=radio] { -webkit-appearance: radio; -moz-appearance: radio; appearance: radio;}button, [type=button], [type=reset], [type=submit] { cursor: pointer;}button:disabled, [type=button]:disabled, [type=reset]:disabled, [type=submit]:disabled { cursor: default;}:-moz-focusring { outline: auto;}select:disabled { opacity: inherit;}option { padding: 0;}fieldset { margin: 0; padding: 0; min-width: 0;}legend { padding: 0;}progress { vertical-align: baseline;}textarea { overflow: auto;}[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto;}[type=search] { outline-offset: -2px;}[type=search]::-webkit-search-decoration { -webkit-appearance: none;}::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;}label[for] { cursor: pointer;}details { display: block;}summary { display: list-item;}[contenteditable]:focus { outline: auto;}table { border-color: inherit;}caption { text-align: left;}td, th { vertical-align: top; padding: 0;}th { text-align: left; font-weight: initial;}

/*--------------------------------------
サイト共通定義
--------------------------------------*/
/* html {scroll-behavior: smooth;} */
body {
  line-height: 1.6;
  margin: 0 auto;
  min-height: 800px;
  min-width: 320px;
  width: 100%;
  color: var(--black);
  background-image:  repeating-linear-gradient(45deg, var(--main_color_03) 25%, transparent 25%, transparent 75%, var(--main_color_03) 75%, var(--main_color_03)), repeating-linear-gradient(45deg, var(--main_color_03) 25%, rgb(255 255 255 / 30%) 25%, rgb(255 255 255 / 30%) 75%, var(--main_color_03) 75%, var(--main_color_03));
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px;
  background-color: var(--main_color_03);
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  font-family: "M PLUS Rounded 1c", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 13px;
  overflow-x: hidden;
  word-break: break-word;
}
@media (min-width: 768px) {
  body {font-size: 14px;}
}
input[type="submit"] , input[type="reset"] , input[type="button"] {
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
body.open {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
body.open .nav_list {overflow: scroll;}
body::-webkit-scrollbar {width: 10px;}
body::-webkit-scrollbar-track {background-color: var(--white);}
body::-webkit-scrollbar-thumb {background-color: var(--main_color_01);border-radius: 100px;}
::-moz-selection {background: var(--main_color_01);color: var(--white);}
::selection {background: var(--main_color_01);color: var(--white);}
ul::-webkit-scrollbar {display: none;}
img, video {width: 100%;height: auto;}

[id] {scroll-margin-top: 0px;}
#guideline{scroll-margin-top: 60px;}
@media (min-width: 768px) {
  [id] {scroll-margin-top: 30px;}
}

/*--------------------------------------
大エリア設定
--------------------------------------*/
.wrapper {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.inner {
  max-width: 1200px;
  margin: auto;
}
.inner800 {
  max-width: 1000px;
  margin: auto;
}
.cat {padding: 40px 20px;}
@media (min-width: 768px) {
  .cat {padding: 60px 20px;}
}
/* セクション */
main.index .sec {padding: 40px 20px;}
main.index .sec.section_point{padding: 100px 20px 80px;}

/* フリル */
.deco_frill_top{position: relative;}
.deco_frill_top::before,.deco_frill_top::after{
  position: absolute;
  left: 0;
  width: 100%;
  background-size: 60px auto;
  content: "";
  background-repeat: repeat-x;
  background-image: url(../images/img_pattern_frill.svg);
}
.deco_frill_top::before{
  top: -36px;
  height: 36px;
  background-position: top center;
}
.deco_frill_top::after{
  bottom: -36px;
  height: 40px;
  background-position: bottom center;
  transform: rotate(180deg);
}

main.index .sec.section_option{padding: 60px 20px 80px;}/* オプション */
main.index .sec.section_column{padding: 90px 20px 40px;}/* コラム */
@media (min-width: 768px) {
  main.index .sec {padding: 60px 20px;}
  main.index .sec.section_column,main.index .sec.section_qa{padding: 110px 20px 60px;}/* コラム よくある質問 */
}



/*--------------------------------------
共通のlink
--------------------------------------*/
a:link , a:visited , input {transition: all .4s;}
a:hover {opacity: .6;}
@media (min-width: 768px) {
  a img {transition: all .4s;}
  a img:hover {opacity: .6;}
}

/*--------------------------------------
共通のスライダー
--------------------------------------*/
/* 左右矢印　*/
.swiper-button-lock{display: block;}
.swiper-navigation-icon{display: none;}
.swiper-button-prev:after,.swiper-button-next:after{
  content: '';
  background: url(../images/btn_arrow_black.svg) no-repeat center / 24px auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.swiper-button-prev:after {
  transform: rotate(-180deg);
  left: 20px;
}
.swiper-button-next:after {
  right: 20px;
}
@media (min-width: 768px) {
  .swiper-button-prev:after{left: 10px;}
  .swiper-button-next:after{right: 10px;}
  .swiper-button-prev:after,.swiper-button-next:after{background: url(../images/btn_arrow_black.svg) no-repeat center / 30px auto;}
  .swiper-button-next, & ~ .swiper-button-next, &.swiper-rtl .swiper-button-prev, &.swiper-rtl ~ .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 30px)!important;
  }
  .swiper-button-prev, & ~ .swiper-button-prev, &.swiper-rtl .swiper-button-next, &.swiper-rtl ~ .swiper-button-next{
    left: var(--swiper-navigation-sides-offset, 30px)!important;
  }
  .section_productions .swiper-button-lock{display: none;}
  /* .section_design .swiper-button-prev,
  .section_design .swiper-button-next{
    display: none;
  } */
}
/* ナビゲーション */
.swiper-pagination-horizontal {bottom: 20px;}
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: transparent;
  border: 1px solid var(--black);
  opacity: 1;
  margin: 0 6px !important;
}
.swiper-pagination-bullet-active {background: var(--black);}
.section_productions .swiper-pagination-bullet{border: 1px solid var(--black);}
.section_productions .swiper-pagination-bullet-active{background: var(--black);}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 8px);
}
.swiper-pagination {z-index: 1;}
.section_price .swiper{/* 価格表ナビゲーション */padding-bottom: 30px;}

/*--------------------------------------
表示・非表示
--------------------------------------*/
.sp { display: block!important;}
@media (min-width: 768px) {
  .sp { display: none!important;}
}
.pc { display: none!important;}
@media (min-width: 768px) {
  .pc { display: block!important;}
}

/*--------------------------------------
マージン
--------------------------------------*/
.mb_5{margin-bottom: 5px;}
.mb_10{margin-bottom: 10px;}
.mb_20,.mb_noflavor{margin-bottom: 20px;}
.mb_30{margin-bottom: 30px;}
.mb_40{margin-bottom: 40px;}
.mb_50{margin-bottom: 50px;}
.mb_60{margin-bottom: 60px;}
.mb_120{margin-bottom: 120px;}

.mb_responsive{margin-bottom: 40px;}

@media (min-width: 768px) {
  .mb_responsive{margin-bottom: 60px;}
}

.pt_60{padding-top: 60px;}

/*--------------------------------------
2カラム
--------------------------------------*/
@media screen and (min-width: 600px){
  .row section:first-child{margin-bottom: 100px;}
}
@media screen and (min-width: 600px){
	.row{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
  }
  .row section{
    width: calc((100% - 40px) / 2);
    margin-bottom: 0;
  }
  .row section:first-child{margin-bottom: 0;}
}


/*--------------------------------------
共通のボックス
--------------------------------------*/
/* ピンク線、白背景のボックス（推しポイント） */
.liner_pink {
  position: relative;
  border: 2px solid var(--main_color_02);
  background: rgb(255 255 255 / 0.9);
  border-radius: 20px;
  padding: 60px 20px 40px;
}
.liner_border {/* ピンクの点線 */
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.liner_pink.slide{padding: 60px 0 40px;}
.slide_pd{padding: 0 20px;}

/* 黒線、白背景のボックス */
.liner_black{
  position: relative;
  border: 2px solid var(--black);
  background: rgb(255 255 255 / 0.9);
  border-radius: 20px;
  padding: 30px 20px;
}
.liner_black.bg_pink{/* ピンクの背景色 */background: var(--main_color_03);}
.liner_black.box_shadow{/* シャドーあり */box-shadow: 4px 4px 0 0 var(--black)}
.liner_black.slide{padding: 30px 0 30px;}
@media (min-width: 768px) {
  .liner_white{
    padding: 50px 60px;
    margin-bottom: 0;
  }
  .liner_black{padding: 40px 50px 50px;}
  .section_recommendation .liner_black{padding: 40px 30px}
  .alcohol_outer .liner_white{padding: 20px;}
  .slide_pd{padding: 0 50px;}
  main.productions .section_productions .slide_pd{padding: 0;}
}
/* ピンクのボックス */
.box_pink{
  background: var(--main_color_03);
  border-radius: 20px;
  padding: 20px 20px 30px;
}
.box_pink.slide{padding: 20px 0 30px;}
/* 半透明の白いボックス */
.box_white{
  background: rgb(255 255 255 / 0.9);
  border-radius: 20px;
  padding: 20px 20px 30px;
}
@media (min-width: 768px) {
  .box_pink.slide {padding: 40px 0 50px;}
  .box_pink,.box_white{padding: 40px 60px 50px;}
}


/*--------------------------------------
色
--------------------------------------*/
/*変数*/
:root {
  --main_color_01: #FF8CCA;
  --main_color_02: #FFCDE8;
  --main_color_03: #FFEBF6;
  --red: #ff0055;
  --yellow: #fff800;
  --green: #60c363;
  --black: #1F1D1E;
  --gray: #D9D9D9;
  --white: #fff;
  --filter_white: invert(100%) sepia(100%) saturate(0%) hue-rotate(137deg) brightness(106%) contrast(101%);
  --filter_black: brightness(0) saturate(100%) invert(7%) sepia(1%) saturate(2516%) hue-rotate(278deg) brightness(96%) contrast(88%);;
}
.txt_color_black{color: var(--black);}
.txt_color_white{color: var(--white);}
.txt_color_pink{color: var(--main_color_01);}

/*--------------------------------------
アニメーション
--------------------------------------*/
.floating {
  animation: floating-y 2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(2%);
  }
}
.floating2 {
  animation: floating-y2 2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y2 {
  0% {
    transform: translateY(2%);
  }
  100% {
    transform: translateY(-2%);
  }
}

/*--------------------------------------
背景
--------------------------------------*/
.bg_color_01{
  background-color : var(--white);
  background-image :
    repeating-linear-gradient(to bottom,rgba(255, 188, 220, 0.20),rgba(255, 188, 220, 0.20) 20px,rgba(0, 0, 0, 0) 0,rgba(0, 0, 0, 0) 40px),
    repeating-linear-gradient(to right,rgba(255, 188, 220, 0.20),rgba(255, 188, 220, 0.20) 20px,rgba(0, 0, 0, 0) 0,rgba(0, 0, 0, 0) 40px);
}
/* .bg_color_02 {
  background-image:  repeating-linear-gradient(45deg, var(--main_color_03) 25%, transparent 25%, transparent 75%, var(--main_color_03) 75%, var(--main_color_03)), repeating-linear-gradient(45deg, var(--main_color_03) 25%, rgb(255 255 255 / 30%) 25%, rgb(255 255 255 / 30%) 75%, var(--main_color_03) 75%, var(--main_color_03));
  background-position: 0 0, 20px 20px;
  background-size: 50px 50px;
  background-color: var(--main_color_03);
} */
.bg_color_03 {
  background: url(../images/bg_pattern_rh.svg) repeat;
  background-position: center 2%;
  background-size: 100px 100px;
  background-color: var(--main_color_03);
}
.bg_color_04 {
  background: url(../images/bg_pattern_h.svg) repeat;
  background-position: center 2%;
  background-size: 80px 80px;
  background-color: var(--main_color_02);
}

/*--------------------------------------
テキスト系
--------------------------------------*/
/*フォントサイズ*/
.fs_6{font-size: 0.45em!important;}
.fs_7{font-size: 0.5em!important;}
.fs_8{font-size: 0.7em!important;}
.fs_12{font-size: 0.9em!important;}
.ts_pc.fs_12{font-size: 0.9em!important;}
@media (min-width: 768px) {
  .ts_pc.fs_12{font-size: 14px!important;}
}
.fs_16{font-size: 1.2em!important;}
.fs_20{font-size: 1.25rem!important; /* ルートが13px 20÷13=1.25px */}
.fs_32{font-size: 2.5em!important;}

.bold{font-weight: bold;}
/* フォントファミリー */
.m-plus-rounded-1c-regular {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.m-plus-rounded-1c-medium {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 600;
  font-style: normal;
}
.m-plus-rounded-1c-extrabold {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  font-style: normal;
}
.m-plus-rounded-1c-black,
.m-plus-rounded-1c-black_jp {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 900;
  font-style: normal;
}
/* テキストアライン */
.left{text-align: left;}
.center{text-align: center;}

/*--------------------------------------
タイトル & 見出し
--------------------------------------*/
h2.reason{
  margin: 0 0 60px 10px;
  font-size: 1.6em;
  font-weight: bold;
}
@media (min-width: 768px) {
  h2.reason{
    margin: 0 0 80px 10px;
    text-align: center;
    font-size: 2em;
  }
}
h2.title {
  font-size: 32px;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin-bottom: 10px;
  font-weight: bold;
}
main.terms h2.title {
  font-size: 28px;
  font-weight: bold;
}
@media (min-width: 768px) {
  h2.title,
  main.terms h2.title {
    font-size: 36px;
    margin-bottom: 20px;
  }
}
/* 白文字svgタイトル */
/* .section_column .inner,
.section_option .inner,
.section_alcohol,
.section_amazongift,
.section_productions,
main.samples .samples_list .inner{
  position: relative;
}
.section_column .title_contents,
.section_option .title_contents,
.section_alcohol .title_contents,
.section_amazongift .title_contents,
.section_productions .title_contents,
main.samples .samples_list .title_contents{
  width: auto;
  height: 80px;
  position: absolute;
  top: -54px;
  left: 10px;
  z-index: 2;
}
.section_alcohol .title_contents,
.section_amazongift .title_contents{
  top: -62px;
}
.section_productions .title_contents{
  top: -38px;
  height: 50px;
}
@media (min-width: 768px) {
  .section_column .title_contents,
  .section_option .title_contents,
  .section_alcohol .title_contents,
  .section_amazongift .title_contents,
  .section_productions .title_contents,
  main.samples .samples_list .title_contents {
    height: 100px;
    top: -66px;
  }
  .section_alcohol  .title_contents,
  .section_amazongift .title_contents,
  .section_productions .title_contents{
    top: -75px;
  }
} */
/* 下層ページの共通タイトル1 */
.secondary_title {margin-bottom: 24px;}
@media (min-width: 768px) {
  .secondary_title {margin-bottom: 40px;}
}
h3.secondary_title  {
  color: var(--main_color_01);
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1;
}
h3.secondary_title span {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.4em;
  color: var(--gray);
  letter-spacing: 0.1em;
}
/* 下層ページの共通タイトル2 */
h4.tertiary_title  {
  margin-bottom: 24px;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.5;
}

/*--------------------------------------
共通のボタン
--------------------------------------*/
.btn {
  display: block;
  width: 100%;
  max-width: 230px;
  padding: 8px 10px;
  border-radius: 30px;
  color: var(--white);
  text-align: center;
  overflow: hidden;
  position: relative;
  margin: 20px auto 0;
  transition: .2s ease-in-out;
  z-index: 1;
  box-sizing: border-box;
  background: var(--black) url(../images/btn_arrow_white.svg) no-repeat right 10px center / 20px auto;
}
.btn:hover{background: var(--main_color_01) url(../images/btn_arrow_white.svg) no-repeat right 10px center / 20px auto;opacity: 1;}
.btn.bg_green {/* 緑色の背景色 */background: var(--green) url(../images/btn_arrow_green.svg) no-repeat right 10px center / 20px auto;}
.btn.bg_pink {/* ピンク色の背景色 */background: var(--main_color_01) url(../images/btn_arrow_white.svg) no-repeat right 10px center / 20px auto;}
.btn.bg_green:hover,.btn.bg_pink:hover {/* ピンクの背景色 */background: var(--black) url(../images/btn_arrow_white.svg) no-repeat right 10px center / 20px auto;}
.btn.bg_white {/* コピーボタンの背景色 */background: var(--black) url(../images/txt_btn_copy.svg) no-repeat right 10px center / 16px auto;}
.btn.txtabove{margin: 8px auto 0;}
.btn.left{margin: 20px 0 0 0;}
.btn.center_sp{margin: 20px auto 0;}
.samples_item .btn{margin: 10px auto 0;}
@media (min-width: 768px) {
  .btn_flex{
    display: flex;
    gap: 20px;
  }
  
  .btn.center_sp{margin: 20px 0 0 0;}
}

/* テキストボタン */
.btn_txt {
  background: url(../images/btn_arrow_white.svg) left center / 16px auto no-repeat;
  padding-left: 20px;
  text-decoration: underline;
}
/* .bg_black .btn_txt {
  color: var(--white);
}
.bg_black .btn_txt:hover {
  color: var(--sub_color);
} */

/*--------------------------------------
共通のtable
--------------------------------------*/
table {
  border-collapse: collapse;
  width: 100%;
}
table th , table td {
  padding: 12px;
  vertical-align: middle;
  line-height: 1.4;
}
@media (min-width: 768px) {
  table th {padding: 20px 15px;}
  table td {padding: 10px 15px;}
}
@media (min-width: 940px) {
  /* table{
    overflow-x: auto;
    display: table;
  } */
}

/* 料金表 */
/*タブ設定(jquery用)*/
.tab_box .system_tab li{cursor: pointer;font-size: 12px;}
.tab_box .system_container{display: none;}
.tab_box .system_container.show {display: block;}
@media screen and (min-width: 600px){
  .tab_box .system_tab li{font-size: 14px;}
}
/*タブ選択*/
/* .tab_box .system_select ul{
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin: 0 auto 10px;
  max-width: 220px;
  flex-wrap: wrap;
}
.tab_box .system_select ul li{
  width: calc((100% - 4px) / 2);
  background: var(--main_color_02);
  color: var(--black);
  border-radius: 20px 20px 0 0;
  font-size: 10px;
}
.tab_box .system_select ul li p{
  padding: 8px 2px 5px;
  width: 100%;
  height: 100%;
  display: inline-block;
  text-align: center;
}
.tab_box .system_select ul li.active{
  background: var(--main_color_01);
  color: var(--white);
}
@media screen and (min-width: 600px){
  .tab_box .system_select{
    padding: 0 10px;
  }
  .tab_box .system_select ul{
    max-width: 320px;
  }
  .tab_box .system_select ul li{font-size: 13px;}
} */

/* .table_01 {
  table-layout: fixed;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.table_01 th , .table_01 td {text-align: center;}
.table_01 th {
  background: #43425ccc;
  color: var(--white);
  border-right: solid 1px #B6B5D6;
}
.table_01 td{border-right: solid 1px #B6B5D6;}
.table_01 td:last-child{border-right: 0;}
@media (min-width: 961px) {
  .table-wrap::after {display: none;}
} */
/* テーブル_料金表 */
.table th:last-child {
  border-right: 0;
  text-align: center;
  padding: 15px;
  background: var(--black);
  color: var(--white);
  border-radius: 20px 20px 0 0;
}
.table td,.table th{
  width: 50%;
  border-top: solid 1px var(--main_color_03)
}
.table td{
  text-align: center;
  background: var(--white);
}
.table tr:last-child td{border-radius: 0 0 20px 0;}
.table th{
  background: var(--gray);
  text-align: center;
}
.table tr:last-child th{border-radius: 0 0 0 20px;}
main.lineup .table td{border-top: solid 1px var(--gray);}
main.lineup .table th{border-top: solid 1px var(--white);} 

/* おすすめ */
table.recommendation_item tr.recommendation_title {
  height: 20px;
}
table.recommendation_item tr:first-child td{padding: 0 8px 10px;}
table.recommendation_item th,table.recommendation_item td{
  padding: 0 4px;
  width: calc(100%/3);
}
@media (min-width: 768px){
  /* table.recommendation_item tr:first-child td{padding: 0 8px 10px;} */
  table.recommendation_item.recommendation_title_neck tr:first-child td{padding: 0 8px 25px;}
}

/* 縦 利用規約ページ */
table.table_02 {
  border-spacing: 0;
  width: 100%;
}
.table_02 th {
  width: 35%;
  background: var(--gray);
  color: var(--black);
  border-bottom: solid 1px var(--white);
  font-weight: 600;
}
.table_02 td {border-bottom: solid 1px var(--gray);font-weight: 500;}

/*--------------------------------------
共通のモーダル（テンプレート & 制作実績）
--------------------------------------*/
.modal_detail {/* モーダルの内容を非表示にしておく */
  display: none;
}
.modaal-wrapper .modaal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background: none;
  box-shadow: none;
}
.modaal-close:after, .modaal-close:before {
  top: 9px;
  left: 18px;
  width: 2px;
  background: var(--black);
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {background: var(--main_color_01);}
.modaal-container {
  width: min(100%, 800px);
  background: var(--white);
  color: var(--black);
  border-radius: 20px;
}
.modaal-container img {
  width: 100%;
  max-width: 100% !important;
  height: auto !important;
}
.modaal-container .sample_bottle_img{margin-bottom: 10px;}
.modaal-container .sample_bottle_img>div:first-child{margin-bottom: 20px;}
.modaal-container img.img_bottle{
  width: 20%;
  display: block;
  margin: 0 auto 10px;
}
.modaal-content-container {padding: 20px 20px 30px;}
.modaal-content-container .thum{margin-bottom: 20px;}
.modaal-content-container .thum.modaal_productions{margin-top: 40px;}
.modaal-content-container h4 {
  margin: 4px 0 16px;
  font-size: clamp(14px, 2vw, 20px);
  line-height: 1.2;
  font-weight: bold;
}
.modaal-content-container .text {
  margin-bottom: 20px;
  font-size: clamp(12px, 2vw, 14px);
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}
.modaal-container .sample_bottle_img:has(> :nth-child(1):last-child)>div {
    display: block;
    margin: 0 auto;
    width: 100%;
  }
@media (min-width: 768px) {
  .modaal-container img.img_bottle{width: 40%;}
  .modaal-wrapper .modaal-close {
    top: 10px;
    right: 10px;
  }
  .modaal-content-container {padding: 20px 60px 50px;}
  .modaal-container .sample_bottle_img{
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
  }
  .modaal-container .sample_bottle_img>div:first-child{
    width: 65%;
    margin-bottom: 0;
  }
  .modaal-container .sample_bottle_img>div:last-child{width: 35%;}
}

/*--------------------------------------
ページネーション
--------------------------------------*/
.page_list {
  margin-top: 20px;
  /* padding: 0 20px; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
}
.page_list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 40px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
}
.page_list li.active {
  background: var(--black);
  border-radius: 50px;
  color: var(--white);
}
.page_list li.arrow {border: none;}
.page_list li.disabled.arrow {opacity: 0;}
.page_list li.arrow img {
  width: 24px;
  height: auto;
  vertical-align: middle;
}
.page_list li.arrow.prev img {transform: rotate(180deg);}
.page_list li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (min-width: 768px) {
  .page_list {margin-top: 64px;}
}

/*--------------------------------------
ローディングアニメーション
--------------------------------------*/
/* #loading {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: #fafafa;
  z-index: 999;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.loader {
  width: 60px;
  aspect-ratio: 3;
  --dot: no-repeat radial-gradient(circle closest-side,var(--main_color_012) 90%,#0000);
  background: 
    var(--dot) 0%   50%,
    var(--dot) 50%  50%,
    var(--dot) 100% 50%;
  background-size: calc(100%/3) 50%;
  animation: loading-dot 1s infinite linear;
}
@keyframes loading-dot {
    20%{background-position:0%   0%, 50%  50%,100%  50%}
    40%{background-position:0% 100%, 50%   0%,100%  50%}
    60%{background-position:0%  50%, 50% 100%,100%   0%}
    80%{background-position:0%  50%, 50%  50%,100% 100%}
} */


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

ヘッダー

--------------------------------------*/
header{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  /* opacity: 0; */
  z-index: 20;
  transition: opacity .3s ease;
}
header.show{
  opacity: 1;
}
header h1 img {
  width: 80px;
}
header .header_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 10px ;
}

/* PCナビゲーション */
header .pc_nav,header .btn {display: none}
header .pc_nav ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
header .pc_nav ul li a {color: var(--black);}
/* PCお問い合わせボタン */
header .btn {
  width: 180px;
  margin: 0;
  background: var(--main_color_01);
  color: #fff;
}

/* 下層メニューsp */
.nav_menu li.has_child_sp ul{margin-left: 10px;}
.nav_menu li.has_child_sp ul li a{
  align-items: center!important;
  padding: 6px 0!important;
}
.nav_menu li.has_child_sp img{
  width: 14px;
  height: 14px;
  margin-right: 4px;
}

@media (min-width: 1250px) {
  header {
    display: block;
    opacity: 1;
    background: #fff;
  }
  header .pc_nav,header .btn {display: block;}
  .header_nav {display: none;}
  /* 下層メニューpc */
  header ul li.has_child {
    position: relative;
  }
  header ul li.has_child ul {
    position: absolute;
    left:calc(50% - 100px);
    top:20px;
    z-index: 4;
    width:200px;
    padding:10px 0 15px;
    visibility: hidden;
    opacity: 0;
    transition: all .3s;
    text-align: center;
    background: var(--white);
    border-radius: 0 0 20px 20px;
  }
  header ul li.has_child ul li:not(:first-child){margin-top: 4px;}
  header ul li.has_child:hover > ul {
    visibility: visible;
    opacity: 1;
  }
  header.is-open {
    height: 120px;
  }
}

/* ハンバーガーメニュー */
.header_nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
}
.header_nav .nav_list {
  position: fixed;
    -webkit-overflow-scrolling: auto;
    width: 80%;
    /* height: 560px; */
    top: 0;
    right: 0;
    border-radius: 0 0 30px 30px;
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
    /* padding: 100px 0; */
    gap: 20px;
    -ms-flex-line-pack: center;
    align-content: center;
    visibility: hidden;
    opacity: 0;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    text-align: center;
}
.header_nav .nav_list::-webkit-scrollbar {display:none;}
.header_nav .nav_list .nav_box {
  width: 100%;
  /* max-width: 260px; */
  margin: 0 auto;
  padding: 20px;
}
.header_nav .menu-btn {display: none;}
.header_nav .menu-btn:checked ~ .nav_list {
  visibility: visible;
  opacity: 1;
  background: var(--white);
}
@media (min-width: 768px) {
  .header_nav .nav_list {
    width: 290px;
    /* height: 590px; */
  }
}
/* メニューフェードイン */
.header_nav .menu-btn:checked ~ .nav_list .nav_menu li {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
.header_nav .menu-btn:checked ~ .nav_list .nav_menu li:nth-of-type(even) {
  transform: translateX(150%);
  animation-name: fadeInMenuEven;
}
.header_nav .menu-btn:checked ~ .nav_list .nav_menu li:nth-of-type(odd) {
  transform: translateX(-150%);
  animation-name: fadeInMenuOdd;
}
@keyframes fadeInMenuEven {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}
@keyframes fadeInMenuOdd {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}
.header_nav .nav_list .nav_menu li a {
  text-decoration: none;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  z-index: 1;
  padding: 10px 0;
}
.header_nav .nav_list .nav_menu li a:hover {
  color: var(--main_color_01);
  opacity: 1;
}
.header_nav .nav_list .nav_menu li a.btn{justify-content: center;}
.header_nav .nav_list .nav_menu li a:hover.btn{color: var(--white);}

/* 3本線 */
.header_nav .menu-btn:checked ~ .menu-icon .navicon {
  transform: rotateY(-360deg);
  background: none;
  -webkit-transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
  transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}
.header_nav .menu-btn:checked ~ .menu-icon .navicon:before {
  top: 0;
  right: 0;
  transform: rotate(-135deg);
  background: var(--black);
}
.header_nav .menu-btn:checked ~ .menu-icon .navicon:after {
  bottom: 0;
  right: 0;
  transform: rotate(135deg);
  background: var(--black);
}
.header_nav .menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  z-index: 100;
  position: relative;
}
.header_nav .menu-icon .navicon {
  display: block;
  height: 3px;
  width: 30px;
  position: relative;
  background: var(--main_color_01);
  -webkit-transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
  border-radius: 10px;
}
.header_nav .menu-icon .navicon:before,
.header_nav .menu-icon .navicon:after {
  content: "";
  display: block;
  height: 3px;
  width: 30px;
  position: absolute;
  background: var(--main_color_01);
  -webkit-transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
  transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
  border-radius: 10px;
}
.header_nav .menu-icon .navicon:before {top: 8px; /* 上の線の位置 */}
.header_nav .menu-icon .navicon:after {bottom: 8px; /* 下の線の位置 */}

/* spのアコーディオン */
.has_child_sp .accordion_content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.has_child_sp.is-open .accordion_content {
  max-height: 500px; /* 中身が収まる十分な値 */
}
.accordion_trigger {
  cursor: pointer;
  position: relative;
  padding: 10px 0;
}
.accordion_trigger::after {
  content: "＋";
  position: absolute;
  right: 0;
  transition: transform 0.3s;
}
.has_child_sp.is-open .accordion_trigger::after {
  content: "−";
}




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

メイン

--------------------------------------*/
@media (min-width: 1250px) {
  main {margin-top: 64px;}
}
/* メインビジュアル */
main .mainvisual {
  position: relative;
  aspect-ratio: 375 / 638;
}
main .mainvisual li img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
main .mainvisual img.capseal_mv{
  position: absolute;
  bottom: 10px;
  left: -4px;
  z-index: 1;
  width: 45%;
}
main .mainvisual .sp {display: block;}
main .mainvisual .pc {display: none;}
@media (min-width: 768px) {
  main .mainvisual {aspect-ratio: 16/9;}
  main .mainvisual img.capseal_mv{width: 20%;}
  main .mainvisual .sp {display: none;}
  main .mainvisual .pc {display: block;}
}

/* ---------- ハート装飾 ---------- */
/* 共通 */
.deco_heart01,.deco_heart02,.deco_heart03,.deco_heart04,.deco_heart05,.deco_heart06,.deco_heart07,.deco_heart08,.deco_heart09{position: relative;}
.deco_heart01::after,.deco_heart02::after,.deco_heart03::after{position: absolute;z-index: 1;content: "";}
.deco_heart04::before,.deco_heart05::before,.deco_heart06::before,.deco_heart07::before,.deco_heart08::before,.deco_heart09::before{position: absolute;z-index: 1;content: "";}
/* ハート01 */
.deco_heart01::after{
  background: url(../images/img_deco_heart_01.webp) no-repeat;
  bottom: 11%;
  right: -35px;
  width: 100px;
  height: 100px;
  transform: rotate(15deg);
  background-size: 100% auto;
}
@media (min-width: 768px) {
  .section_recommendation .deco_heart01::after{/* おすすめ右 */
    bottom: -10%;
    right: -45px;
    transform: rotate(15deg);
  }
}
.section_alcohol .deco_heart01::after{bottom: -70px;right: 0;}/* 推しポイント03下 */
.section_price .deco_heart01::after{bottom: -50px;right: 0;left: 30px;transform: rotate(-15deg);}/* 料金下 */
/* ハート02 */
.deco_heart02::after {
  background: url(../images/img_deco_heart_02.webp) no-repeat;
  bottom: 42%;
  right: -40px;
  width: 100px;
  height: 100px;
  transform: rotate(15deg);
  background-size: 100% auto;
}
.section_productions .deco_heart02::after {
  bottom: -60px;
  right: -30px;
  transform: rotate(15deg);
}
/* ハート03 */
.deco_heart03::after {
  background: url(../images/img_deco_heart_03.webp) no-repeat;
  top: -40px;
  left: -20px;
  width: 120px;
  height: 120px;
  transform: rotate(-15deg);
  background-size: 100% auto;
}
/* ハート04 */
.deco_heart04::before{
  background: url(../images/img_deco_heart_04.webp) no-repeat;
  top: -40px;
  left: -30px;
  width: 140px;
  height: 150px;
  background-size: 100% auto;
}
/* ハート05 */
.deco_heart05::before{
  background: url(../images/img_deco_heart_05.webp) no-repeat;
  top: -30px;
  left: -20px;
  width: 110px;
  height: 130px;
  background-size: 100% auto;
}
/* ハート06 */
.deco_heart06::before{
  background: url(../images/img_deco_heart_06.webp) no-repeat;
  top: -50px;
  right: -40px;
  width: 130px;
  height: 150px;
  background-size: 100% auto;
}
.section_qa .deco_heart06::after{top: -30px;}/* よくある質問 */
/* ハート07 */
.deco_heart07::before{
  background: url(../images/img_deco_heart_07.webp) no-repeat;
  top: -30px;
  left: -20px;
  width: 110px;
  height: 130px;
  background-size: 100% auto;
}
/* ハート08 */
.deco_heart08::before{
  background: url(../images/img_deco_heart_08.webp) no-repeat;
  top: -70px;
  right: -40px;
  width: 130px;
  height: 150px;
  background-size: 100% auto;
}
/* ハート09 */
.deco_heart09::before{
  background: url(../images/img_deco_heart_09.webp) no-repeat;
  top: -70px;
  left: -20px;
  width: 130px;
  height: 150px;
  background-size: 100% auto;
}
@media (min-width: 768px) {
  [class*="deco_heart"]::before,[class*="deco_heart"]::after {transform: scale(1.2);}
  .deco_heart01::after,.deco_heart02::after{transform: scale(1.2) rotate(15deg);}
  .deco_heart03::after{transform: scale(1.2) rotate(-15deg);}
}

/* ---------- トップページ おすすめ ---------- */
.section_recommendation .recommendation_item{
  display: flex;
  gap: 16px;
  justify-content: space-around;
}
.section_recommendation .recommendation_item li{width: calc(100% / 3);}
/* .section_recommendation .recommendation_item_outer{padding: 0 20px;} */
.section_recommendation .recommendation_item_outer:not(:last-child){
  border-bottom: 1px solid var(--gray);
  margin-bottom: 20px;
  padding: 0 0 20px;
}
.section_recommendation .recommendation_title p{
  color: var(--black);
  text-align: center;
  border-radius: 20px;
  background: var(--main_color_03);
  font-size: 0.8em!important;
  padding: 4px 0;
  /* margin-top: 10px; */
}
@media (min-width: 780px) {
  .section_recommendation .recommendation_item_outer:not(:last-child){
    padding: 0 20px 20px;
  }
  /* .section_recommendation .recommendation_item{height: 110px;} */
  .section_recommendation .recommendation_item li{
    width: auto;
  }
  .section_recommendation .recommendation_item_neck .recommendation_item li{display: grid;}
  .section_recommendation ul.recommendation_box{
    display: flex;
    /* gap:20px; */
    /* align-items: center; */
    justify-content: center;
  }
  .section_recommendation .recommendation_item_outer{
    border-bottom: 0;
    width: 33%;
    padding: 0;
  }
  .section_recommendation .recommendation_item_outer:first-child{width: 23%;}
  /* .section_recommendation .recommendation_item_outer:first-child img{
    width: auto;
    height: 100%;
  } */
  .section_recommendation .recommendation_item_outer:nth-child(2){
    border-left: 1px solid var(--gray);
    border-right: 1px solid var(--gray);
    padding: 0 16px!important;
    margin: 0 16px!important;
  }
  .section_recommendation .recommendation_item_outer:not(:last-child){
    border-bottom: 0;
    margin: 0;
    padding: 0;
  }
  .section_recommendation .recommendation_item_outer:first-child .recommendation_item{justify-content: center;}
  /* .section_recommendation .recommendation_item_outer:first-child .recommendation_item li{width: auto;} */
}


/* ---------- トップページ 料金 ---------- */
.section_price{background: var(--white);}
.section_price .price_outer{margin: 0 auto 20px;}
.section_price .price_outer>div{text-align: center;}
.section_price .price_outer .txt_bg_violet{
  background: var(--main_color_01);
  color: var(--white);
  width: 100%;
  border-radius: 50px 0;
  padding: 4px;
  letter-spacing: .1em;
}
.section_price .price_outer .price_inner{
  width: 100%;
  margin: 0 auto;
  margin-bottom: 20px;
}
.section_price .price_outer .free_shipping{
  font-size: 1.6em;
  width: 80%;
  margin: 0 auto 20px;
}
.section_price .price_outer img.txt_minimum_amount{width: 90%;}
.section_price .price_op_img{
  display: inline-block;
  margin-bottom: 40px;
}
.section_price .price_op_img img{
  width: 75%;
  display: block;
}
.section_price .price_op_img img:nth-of-type(2),
.section_price .price_op_img img:nth-of-type(3){width: 90%;}
.section_price .price_op_img img:nth-child(even){margin-left: auto;}
/* 誘導バナー */
.section_price .system_bnr{margin-bottom: 30px;}
.section_price .system_bnr li:first-child{
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .section_price .price_outer{margin: 0 auto 40px;}
  .section_price .price_outer{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .section_price .price_outer>div{
    width: calc((100% - 20px) / 2);
    text-align: center;
  }
  .section_price .price_outer>div:first-child {
    width: 40%;
    text-align: right;
  }
  .section_price .price_outer>div:first-child img {width: 90%;}
  .section_price .price_outer>div:last-child {width: 50%;}
  .section_price .price_outer .free_shipping{width: 100%;}
  .section_price .price_outer img.txt_minimum_amount{
    width: 80%;
    max-width: 260px;
  }
  .section_price .price_outer .price_inner{
    width: 90%;
    margin-bottom: 0;
  }
  .section_price .price_op_img{display: none;}
  /* 誘導バナー */
  .section_price .system_bnr{margin-bottom: 0;}
  .section_price .system_bnr ul{
    display: flex;
    gap: 40px;
    justify-content: space-between;
    margin-bottom: 30px;
  }
  .section_price .system_bnr li{
    width: calc((100%/2) - 20px);
  }
  .section_price .system_bnr li:first-child{margin-bottom: 0;}
}
@media (min-width: 860px) {
  .section_price .price_outer>div:first-child img {width: 70%;}
}

/* ---------- トップページ MEGAオリシャンが選ばれる理由 ---------- */
.reason_no{
  width: auto;
  height: 120px;
  position: absolute;
  top: -61px;
  left: 50%;
  transform: translateX(-50%);
}

/* ---------- トップページ デザインラインナップ ---------- */
/* .section_design .design_outer{margin-bottom: 40px;} */
/* .section_design .swiper{padding-bottom: 30px;} */
.section_design .design_outer li img{
  width: 40%;
  margin: 0 auto;
  display: block;
}
@media (min-width: 768px) {
  .section_design .design_outer{
    /* display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    margin: 20px 0; */
  }
  .section_design .design_outer li img{
    width: 30%;
  }
  .section_design .liner_white,.samples_list .liner_white{
    min-height: 560px;
  }
}
@media screen and (min-width:601px) and ( max-width:1079px) {
  /* .section_design .design_outer {
    gap: 30px;
  } */
  .section_design .design_item {
    /* width: calc((100% - 60px) / 2 ); */
  }
}

/* ---------- トップページ テンプレート ---------- */
main.samples .samples_list .samples_box {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
}
main.index .samples_list{padding-top: 100px;}
.samples_list .samples_box .img_box {
  aspect-ratio: 1 / 1;
  position: relative;
}
.samples_list .samples_box .img_box img{
  position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    object-fit: cover;
    border-radius: 20px;
}
.samples_list .samples_box .img_box a::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.samples_list .samples_box .img_box a img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  object-fit: cover;
}
main.samples .section_design .liner_pink.slide {
  max-width: 400px;
  margin: 0 auto;
  padding: 40px 0;
}
@media (min-width: 768px) {
  /* main.index .samples_list .samples_box .samples_item:nth-of-type(n + 9) {display: none;} */
  main.index .samples_list .samples_box {gap: 0;}
  main.samples .samples_list .samples_box {
    gap: 16px;
    grid-template-columns: repeat(4, 1fr);
  }
  main.samples .section_design img{max-width: 400px;}
}
@media screen and (min-width: 1080px){
  /* main.index .samples_list .samples_box .samples_item:nth-of-type(n + 7) {display: none;} */
  .samples_list .samples_box {grid-template-columns: repeat(3, 1fr);}
}

/* ---------- トップページ お酒の種類 ---------- */
main.index .section_alcohol .liner_black {border:1px solid var(--black);}
.section_alcohol{padding-top: 100px;}
.section_alcohol .alcohol_des{margin-bottom: 20px;}
.section_alcohol .alcohol_des .square_sp,.section_alcohol .alcohol_des .square_pc{
  display: flex;
  align-items: center;
}
.section_alcohol .alcohol_des .square_pc{display: none;}
.section_alcohol .alcohol_des .square_sp .square_pink,
.section_alcohol .alcohol_des .square_pc .square_pink{
  background: var(--main_color_03);
  width: 40%;
  aspect-ratio: 3/2;
  margin: 0 auto;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: 20px;
}
@media (min-width: 768px) {
  .section_alcohol .alcohol_des .square_sp{display: none;}
  .section_alcohol .alcohol_des .square_pc{display: flex;}
}
.section_alcohol .alcohol_des_txt{text-align: center;}
.section_alcohol .alcohol_des_txt h3{margin-bottom: 10px;}
.section_alcohol .alcohol_outer{margin-bottom: 40px;}
.section_alcohol .alcohol_item{padding: 20px 16px;}
.section_alcohol .alcohol_img {margin-bottom: 10px;}
.section_alcohol .alcohol_name{
  color: var(--black);
  text-align: center;
  line-height: 1.2;
  margin-bottom: 8px;
}
.section_alcohol .alcohol_comment{
  font-size: 12px;
  padding-bottom: 6px;
  margin-bottom: 10px;
  border-bottom: 1px dashed var(--black);
  text-align: center;
}
.section_alcohol .alcohol_specification{
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 2.5px;
  justify-content: space-between;
}
.section_alcohol .alcohol_specification li{
  width: calc((100%/2) - 2.5px);
  padding: 2px 0;
  border: 1px solid var(--black);
  background: var(--white);
  border-radius: 40px;
  text-align: center;
  font-size: 10px;
}
.section_alcohol .alcohol_specification li:last-child{width: 100%;}
.section_alcohol .flavor_kinds{
  font-size: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 10px;
}
.section_alcohol .flavor_kinds.two{justify-content: flex-start;}
.section_alcohol .flavor_kinds li{
  display: flex;
  align-items: center;
  margin-right: 4px;
}
.section_alcohol .flavor_kinds li:before{
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  -webkit-mask: radial-gradient(circle, black 50%, transparent 51%);
  mask: radial-gradient(circle, black 50%, transparent 51%);
}
.section_alcohol .flavor_kinds li.raspberry:before{background: #AC2053;}
.section_alcohol .flavor_kinds li.lychee:before{background: linear-gradient(-45deg, #FC8385, #AC2053);}
.section_alcohol .flavor_kinds li.greenapple:before,.section_alcohol .flavor_kinds li.melon:before{background: #B1DE73;}
.section_alcohol .flavor_kinds li.peach:before{background: #FFA2C4;}
.section_alcohol .flavor_kinds li.muscat:before{background: #D0E07F;}
.section_alcohol .flavor_kinds li.pine:before{background: linear-gradient(-45deg, #FC8385, #FFED50);}
.section_alcohol .flavor_kinds li.strawberry:before{background: #EA2020;}
.section_alcohol .flavor_kinds li.mango:before{background: #FFB443;}
.section_alcohol .flavor_kinds li.lemon:before{background: #ffec43;}
.section_alcohol .flavor_kinds li.dry:before{background: #D4D5A4;}
.section_alcohol .flavor_kinds li.rose:before{background: #F976A6;}
.section_alcohol .flavor_kinds li.white:before{background: #e6d7b4;}
.section_alcohol .flavor_kinds li.ice:before{background: #5CD244;}
.section_alcohol .flavor_kinds li.bran:before{background: var(--white);}
.section_alcohol .flavor_kinds li.bran:before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 3px solid #adadad;
    border-radius: 50%;
}
.section_alcohol .flavor_kinds li.brut:before{background: #BFC294;}
.section_alcohol .flavor_kinds li.red_g:before{background: #C1386F;}
.section_alcohol .flavor_kinds li.whi_g:before{background: #DCE98E;}
/* スライドの高さを一旦リセット */
.section_alcohol .swiper-slide {
  height: auto; /* 明示的にリセット */
}
@media (min-width: 768px) {
  .section_alcohol{padding-top: 80px;}
  .section_alcohol .alcohol_des{
    display: flex;
    align-items: flex-start;
    gap: 20px;
    align-items: center;
    margin: 0 auto 20px;
    max-width: 800px;
  }
  .section_alcohol .alcohol_des>div:first-child{width: calc(100% / 2);}
  .section_alcohol .alcohol_outer{margin-bottom: 60px;}
  .section_alcohol .alcohol_des .circle img {
    width: 90%;
    margin: 0 0 0 auto;
  }
  .section_alcohol .alcohol_des_txt{text-align: left;}
  .section_alcohol .alcohol_des_txt h3{margin-bottom: 0;}
  .section_alcohol .swiper-slide > div > div:first-child {padding-top: 0;}
  .section_alcohol .alcohol_comment{font-size: 13px;}
  .section_alcohol .alcohol_specification li{font-size: 12px;}
  .section_alcohol .flavor_kinds{
    font-size: 11px;
    justify-content: flex-start;
  }
  .section_alcohol .alcohol_item{padding: 20px;}
  .section_alcohol .alcohol_specification .long_kinds{font-size: 11px;}
}

/* ---------- トップページ オプション ---------- */
.section_option .inner .option_outer{
  display: flex;
  gap: 40px;
  flex-direction:column;
  justify-content: center;
}
.section_option .inner .option_outer li.option_item{z-index: 0;}
.deco_txt01,.deco_txt02,.deco_txt03,.deco_txt04,.deco_txt05{position: relative;}
.deco_txt01::before,.deco_txt02::before,.deco_txt03::before,.deco_txt04::before,.deco_txt05::before{
  background: url(../images/img_option_deco_01.svg) no-repeat;
  position: absolute;
  top: 20px;
  right: 0;
  content: "";
  background-size: 100% auto!important;
  width: 70px;
  height: 620px;
  z-index: -1;
}
.deco_txt02::before{background: url(../images/img_option_deco_02.svg) no-repeat;}
.deco_txt03::before{background: url(../images/img_option_deco_03.svg) no-repeat;}
.deco_txt04::before{background: url(../images/img_option_deco_04.svg) no-repeat;}
.deco_txt05::before{background: url(../images/img_option_deco_05.svg) no-repeat;}
.section_option .option_neck img.img_option_neck_01{
  width: 95%;
  display: block;
  margin: 0 auto 20px;
}
.section_option .option_acrylic p.acrylic_name{
  color: var(--black);
  text-align: center;
  border-radius: 20px;
  background: var(--main_color_03);
  font-size: 0.8em !important;
  padding: 4px 0;
  margin-top: 10px;
}
.section_option img.img_option_acrylic_01{
  position: relative;
  z-index: 1;
}
.section_option .option_cap p.p_title{
  background: var(--main_color_03);
  border: 1px solid var(--black);
  padding: 4px 0;
  border-radius: 20px;
  text-align: center;
}
.section_option .option_neck ul.neck_img_01,.section_option .option_neck ul.neck_img_02,.section_option .option_neck ul.neck_img_03{
  display: flex;
  gap: 10px;
  justify-content: center;
}
.section_option .option_neck ul.neck_img_01 li{width: calc(100%/4);}
.section_option .option_neck ul.neck_img_02 li{width: calc(100%/3);}
.section_option .option_neck ul.neck_img_03 li{width: calc(100%/3.5);}
.section_option .option_neck p.neck_name {
    color: var(--black);
    text-align: center;
    border-radius: 20px;
    background: var(--main_color_03);
    font-size: 0.9em !important;
    padding: 4px 0;
    margin-top: 10px;
}
.section_option .option_neck p.neck_name.pastel{font-size: 0.7em!important;}
@media (min-width: 850px) {
  .section_option .inner .option_outer{
    flex-wrap: wrap;
    flex-direction: row;
  }
  .section_option .inner .option_outer li.option_item{width: calc((100% - 40px) / 2);}
}
@media (min-width: 768px) {
  .section_option .option_neck ul.neck_img_01,.section_option .option_neck ul.neck_img_02,.section_option .option_neck ul.neck_img_03{gap: 16px;}
  .section_option .liner_white{padding: 30px 40px;}
}


/* ---------- トップページ 制作実績 ---------- */
main .section_productions{background: var(--white);}
main .section_productions .productions_wrap {position: relative;}
/* スライダーの方 */
main.index .section_productions .productions_list {margin-bottom: 30px;}
main .section_productions .productions_list ul{margin-bottom: 30px;}
main .section_productions .productions_list article a .thum,main .section_productions .productions_list_img article a .thum{
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 10px;
  border-radius: 20px;
  overflow: hidden;
}
main .section_productions .productions_list article a img,main .section_productions .productions_list_img article a img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
    object-fit: cover;
  transition: all 0.4s ease-out;
}
main .section_productions .productions_list article a h3 {
  color: var(--main_color_01);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.2;
  margin-bottom: 8px;
  text-align: center;
  transition: all 0.4s ease-out;
}
main .section_productions .productions_list article a .text {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
  line-height: 1.5;
  transition: all 0.4s ease-out;
}
main .section_productions .productions_list article a .text span{
  font-size: initial!important;
  font-weight: normal;
}
main .section_productions .productions_list article a .text img,main .section_productions .productions_list article a .text table,main .section_productions .productions_list article a .text br{display: none;}
/* 画像のみの方 */
main .section_productions .productions_list_img ul{
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
}
main .section_productions .productions_list_img article a .thum{margin-bottom: 0;}
main .section_productions .productions_list_img ul li{width: calc((100% - 12px) / 3 );}
main .section_productions .productions_list_img ul li:nth-child(-n+5),/* 初めの5件を非表示にする */
main.index .section_productions .productions_list_img ul li:nth-of-type(n + 18) {/* 全体で18件目から非表示にする（5件+12件=全17件）*/
  display: none!important;
}
@media (min-width: 768px) {
  main.index .section_productions .box_pink.slide{padding: 40px 50px 50px;}
  main .section_productions .productions_list_img ul{gap: 8px;}
  main .section_productions .productions_list_img ul li{width: calc((100% - 32px) / 5 );}
  main .section_productions .productions_list_img ul li:nth-child(-n+5),
  main.index .section_productions .productions_list_img ul li:nth-of-type(n + 18){/* spで非表示にした分をリセットする */
    display: block;
  }
  main .section_productions .productions_list_img ul li:nth-child(-n+3),/* 初めの3件を非表示にする */
  main.index .section_productions .productions_list_img ul li:nth-of-type(n + 14) {/* 全体で14件目から非表示にする（3件+10件=全13件）*/
   display: none;
  }
}
/* ホバー */
main .section_productions .productions_list article a:hover img,
main .section_productions .productions_list_img article a:hover img {transform: scale(1.1);}
main .section_productions .productions_list article a:hover .text {opacity: 0.6;}
@media (min-width: 768px) {
  main.productions .section_productions .productions_list article a .thum{margin-bottom: 20px;}
  main.productions .section_productions .productions_list ul{
    display: flex;
    align-items: flex-start;
    /* gap: 20px;
    margin-bottom: 0; */
  }
  main.productions .section_productions .productions_list ul li{
    width: calc((100% - 40px) / 3 );
    /* flex-shrink: 1; */
  }
  /* main.productions .section_productions .productions_list ul li:nth-of-type(n + 4) {display: none;} */
  main.productions .section_productions .liner_black.slide{padding: 40px 60px 50px;}
  main.productions .section_productions .swiper-slide {transform: scale(1) !important;}
}

/* ---------- トップページ コラム ---------- */
.section_column .column_list article {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 0.5px solid var(--black);
}
.section_column .column_list article a .thum {
  width: 100%;
  aspect-ratio: 3 / 2;
  margin-bottom: 8px;
  overflow: hidden;
}
.section_column .column_list article a img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  -o-object-fit: cover;
    object-fit: cover;
  transition: all 0.4s ease-out;
}
.section_column .column_list article a .article_text {
  display: inherit;
  grid-template-rows: auto 1em 3.5em;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 4px;
}
.section_column .column_list article a h3 {
  font-size: clamp(14px, 2vw, 20px);
  line-height: 1.2;
  transition: all 0.4s ease-out;
  font-weight: bold;
}
.section_column .column_list article a time {
  font-size: 12px;
  color: var(--main_color_01);
  font-weight: bold;
  transition: all 0.4s ease-out;
}
.section_column .column_list article a .text {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  transition: all 0.4s ease-out;
}
/* ホバー */
.section_column .column_list article a:hover h3 {color: var(--main_color_012);}
.section_column .column_list article a:hover time,.section_column .column_list article a:hover .text {opacity: 0.6;}
/* ボタン */
.section_column .btn_column{
  position: absolute;
  bottom: -25px;
  left: 0;
  right: 0;
}
@media (min-width: 768px) {
  .section_column .column_list {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0 16px;
  }
  .section_column .column_list article {margin-bottom: 20px;}
  .section_column .column_list article a .article_text {
    display: inherit;
    grid-template-rows: auto 1.5em 4em;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 4px;
  }  
  .section_column .column_list article a time,.section_column .column_list article a .text {font-size: 14px;}
}

/* ---------- トップページ よくあるご質問 ---------- */
.section_qa{color: var(--black);}
.section_qa .qa_box {
  background: var(--white);
  border-radius: 10px;
  border: 1px solid var(--black);
  padding: 0 10px;
  position: relative;
}
.section_qa .qa_box:nth-of-type(n + 2) {margin-top: 10px;}
.section_qa .qa_toggle {display: none;}
.section_qa .qa_q,.section_qa .qa_a {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all .6s;
}
.section_qa .qa_a{border-top: 1px var(--gray) solid;}
.section_qa .qa_q {
  display: block;
  position: relative;
  padding: 14px 20px 14px 30px;
  border-radius: 10px;
}
.section_qa .qa_q::before{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: "Q";
  font-size: 24px;
}
.section_qa .qa_q img {
  width: 14px;
  transform: rotate(90deg);
  position: absolute;
  top: calc(50% - 8px);
  right: 0;
  transition: all .3s;
}
.section_qa .qa_toggle:checked + .qa_q img {transform: rotate(-90deg);}
.section_qa .qa_a {
  display: block;
  position: relative;
  max-height: 0;
  overflow: hidden;
}
.section_qa .qa_a::before{
  position: absolute;
  top: 8px;
  left: 2px;
  content: "A";
  font-size: 24px;
  color: var(--main_color_01);
}
.section_qa .qa_a dl {
  color: var(--main_color_01);
  padding: 14px 20px 14px 30px;
  border-radius: 0 0 10px 10px;
}
.section_qa .qa_a dd {margin-top: 5px;}
.section_qa .qa_toggle:checked + .qa_q + .qa_a {
  max-height: 300px;
  
}
@media (min-width: 768px) {
  .section_qa .qa_box:nth-of-type(n + 2) {margin-top: 16px;}
  .section_qa .qa_q {background-position: 25px center;}
  .section_qa .qa_q:after {right: 20px;}
  .section_qa .qa_a dl {background-position: 25px 10px;}
  .section_qa .qa_q,.section_qa .qa_a dl {padding: 18px 20px 20px 30px;}
}

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

フッター

--------------------------------------*/
footer{
  background: var(--black);
  color: var(--main_color_03);
  padding: 0 20px;
  margin-top: 40px;
  border-radius: 40px 40px 0 0;
  position: relative;
}
footer::before {
    background: url(../images/img_deco_ribbon.webp) no-repeat;
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    background-size: 100% auto;
    width: 130px;
    height: 120px;
    z-index: 1;
}
footer .footer_bottom {
  padding: 80px 0 40px;
  width: min(100%, 800px);
  margin: auto;
}
@media (min-width: 768px) {
  footer{margin-top: 20px;}
  footer .footer_bottom {padding: 80px 0 40px;}
}
/* ロゴ */
footer .footer_bottom figure {text-align: center;}
footer .footer_bottom figure img {
  width: 160px;
  display: inline-block;
  margin: 0 auto;
}
@media (min-width: 768px) {footer .footer_bottom figure img {margin-bottom: 0;}}
/* ナビゲーション */
footer .footer_bottom ul {
  display: -ms-flexbox;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 8px;
  text-align: left;
  margin-bottom: 40px;
}
footer .footer_bottom ul li {width: calc((100% - 16px) / 2);}
footer .footer_bottom p{
  text-align: center;
  font-size: 12px;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid var(--main_color_03);
}
footer .footer_bottom .copyright {
  display: block;
  color: var(--main_color_03);
  font-size: 12px;
  text-align: center;
}
@media (min-width: 768px) {
  footer .footer_bottom ul {
    justify-content: flex-start;
    margin: 0 40px 0;
    border-bottom: 0;
  }
  .footer_flex{
    display: flex;
    margin-bottom: 40px;
  }
  .footer_flex>div:first-child{width: 60%;}
  .footer_flex>div:last-child{width: 40%;}
  footer .footer_bottom p{
    text-align: left;
    line-height: 2;
  }
}
/* 追尾注文ボタン */
.btn_order{
  z-index: 10;
  position: fixed;
  bottom: 10px;
  right: 10px;
  transition:all 0.4s;
}
.btn_order:hover{transform: scale(1.1);}
.btn_order a {
  background: url(../images/icon_heart_green.svg) right 0 center / 120px 120px no-repeat;
  width: 120px;
  height: 90px;
  z-index: 1;
  text-align: center;
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 13px 0 0;
  font-size: 10px;
  line-height: 1.3;
}
.btn_order a img{width: 13px;}
.btn_order a img:hover{opacity: 1;}
@media (min-width: 768px) {
  .btn_order a{
    background: url(../images/icon_heart_green.svg) right 0 center / 140px 100px no-repeat;
    width: 140px;
    height: 100px;
    font-size: 11px;
  }
  .btn_order a img{width: 16px;}
}


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

下層ページ

--------------------------------------*/
main:not(.index) .inner {padding: 80px 20px;}
main:not(.index) .sec {margin-bottom: 64px;}
main:not(.index) .sec:last-child {margin-bottom: 0;}
@media (min-width: 768px) {main:not(.index) .sec {margin-bottom: 80px;}}
main:not(.index) .sec p {margin-bottom: 1rem;}
.spacing {padding: 0 20px;}
@media (min-width: 1025px) {.spacing {padding: 0;}}

/* ---------- 下層ページ デザインテンプレート ---------- */
main.samples .samples_list{margin-bottom: 40px;}
main.samples .samples_category{margin-bottom: 20px;}
main.samples .samples_category .is-empty {
  width: 100%;
  max-width: 160px;
  background: var(--main_color_03) url(../images/btn_arrow_black_bottom.svg) right 15px center / 14px 14px no-repeat;
  padding: 10px 35px 10px 15px;
  border-radius: 50px;
  text-align: center;
  text-align-last: center;
}
@media (min-width: 768px) {
  main.samples .samples_list{margin-bottom: 60px;}
  main.samples .samples_category .is-empty {
    max-width: 200px;
    cursor: pointer;
  }
  main.samples .samples_list .samples_box {grid-template-columns: repeat(4, 1fr);}
}
/* 種類フィルターボタン */
main.samples .samples_filters ul{
  display: flex;
  gap: 10px;
}
main.samples .samples_filters ul li{
  width: calc((100%/2) - 5px);
}
main.samples .samples_filters ul li button{
  color: #fff;
  text-align: center;
  padding: 8px 10px;
  border-radius: 30px;
  width: 100%;
  background: var(--black);
  opacity: 0.5;
}
main.samples .samples_filters ul li button.is-active{
  background: var(--black);
  opacity: 1;
}
@media (min-width: 768px) {
  main.samples .samples_filters ul{
    gap: 20px;
  }
}
/* ランキングナンバー */
.samples_list .ranking_no{
  position: relative;
  color: var(--black);
  z-index: 2;
}
.samples_list .ranking_no::after {/* 三角形 */
  content: "";
  top: 0;
  left: 0;
  border-bottom: 2em solid transparent;
  border-left: 3.2em solid var(--white);
  border-radius: 18px 0 0 0;
  position: absolute;
  z-index: -1;
}
.samples_list .ranking_no .ranking_no_txt{/* no. */
  transform: rotate(-35deg);
  position: absolute;
  font-size: 9px;
  top: 3px;
  left: 2px;
}
/* 1〜3位 */
.samples_list .ranking_no.no_1::after,
.samples_list .ranking_no.no_2::after,
.samples_list .ranking_no.no_3::after{/* 三角形 */
  border-bottom: 2.4em solid transparent;
  border-left: 3.6em solid var(--yellow);
}
.samples_list .ranking_no.no_1 .ranking_no_txt,
.samples_list .ranking_no.no_2 .ranking_no_txt,
.samples_list .ranking_no.no_3 .ranking_no_txt{/* no. */
  font-size: 11px;
  top: 3px;
  left: 4px;
}
@media (min-width: 768px) {
  .samples_list .ranking_no::after {/* 三角形 */
    border-bottom: 3.6em solid transparent;
    border-left: 5.2em solid var(--white);
  }
  .samples_list .ranking_no .ranking_no_txt{/* no. */
    font-size: 14px;
    top: 9px;
    left: 8px;
  }
  /* 1〜3位 */
  .samples_list .ranking_no.no_1::after,
  .samples_list .ranking_no.no_2::after,
  .samples_list .ranking_no.no_3::after{/* 三角形 */
    border-bottom: 4em solid transparent;
    border-left: 5.6em solid var(--yellow);
  }
  .samples_list .ranking_no.no_1 .ranking_no_txt,
  .samples_list .ranking_no.no_2 .ranking_no_txt,
  .samples_list .ranking_no.no_3 .ranking_no_txt{/* no. */
    font-size: 16px;
    top: 8px;
    left: 8px;
  }
}

/* ---------- 下層ページ コラム ---------- */

/* 詳細ページ */
main.column_detail .column_list article{
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
main.column_detail .column_list .text img{
  width: auto;
	max-width: 100%!important;
	height: auto!important;
}
main.column_detail .column_list article{color: var(--black);}
main.column_detail .column_list article h3 {
  font-size: clamp(14px, 2vw, 20px);
  line-height: 1.2;
  color: var(--black);
  margin-bottom: 20px;
}
main.column_detail .column_list article time {
  font-size: 12px;
  color: var(--main_color_01);
  display: block;
}
main.column_detail .column_nav{
  margin: 20px auto 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}
main.column_detail #toc{
  background: var(--main_color_03);
  padding: 30px 20px;
  margin: 0 auto 40px;
  border-radius: 20px;
  width: 100%;
  max-width: 600px;
}
main.column_detail #toc>ul{margin-top: 20px;}
/*見出し装飾*/
main.column_detail .text h4 {
  font-size: clamp(20px, 2.8vw, 24px);
  margin: 20px 0 8px;
  padding: 0 8px 0 12px;
  background: var(--main_color_01);
  color: #fff;
}
main.column_detail .text h5 {
  font-size: clamp(18px, 2.6vw, 20px);
  margin: 10px 0 8px;
}
main.column_detail #toc .toc_title{
  text-align: center;
  font-size: 18px;
  margin: 0;
  padding: 0;
}
main.column_detail #toc .toc-list ul{margin-left: 1.5em;}
main.column_detail summary{cursor: pointer;}
main.column_detail a.bnr_line{
  width: 100%;
  max-width: 500px;
  margin: 40px auto 0;
  display: block;
}
@media (min-width: 768px) {
  main.column_detail .column_list article time,
  main.column_detail .column_list article .text {font-size: 14px;}
  main.column_detail #toc{padding: 40px;}
}

/* ---------- 下層ページ 選べるお酒・料金 ---------- */
main.lineup .section_alcohol .alcohol_item{
  margin-bottom: 20px;
  display: block;
}
main.lineup .section_alcohol .alcohol_item:last-child{margin-bottom: 0;}
/* リピート率ナンバーワンアイコン */
main.lineup .section_alcohol .alcohol_item div.no1,
main.index #section_alcohol .alcohol_outer div.no1{position: relative;}
main.index #section_alcohol .alcohol_outer div.no1::before,
main.lineup .section_alcohol .alcohol_item div.no1::before{
  background: url(../images/icon_no1.svg) no-repeat;
  position: absolute;
  top: 0;
  left: -17px;
  content: "";
  background-size: 100% auto;
  width: 18vw;
  aspect-ratio: 80 / 103;
}
main.index #section_alcohol .alcohol_outer div.no1.no1_alcohol::before,
main.lineup .section_alcohol .alcohol_item div.no1.no1_alcohol::before{
  background: url(../images/icon_no1_alcohol.svg) no-repeat;
}
main.index #section_alcohol .alcohol_outer div.no1::before{
  top: -14px;
  left: -10px;
  width: 14vw;
}
main.lineup .section_alcohol .alcohol_item div.no1::before{
  top:-10px;
  left: -6px;
}
@media (min-width: 768px) {
  main.index #section_alcohol .alcohol_outer div.no1::before,
  main.lineup .section_alcohol .alcohol_item div.no1::before{
    width: min(9vw, 70px);
  }
  main.lineup .section_alcohol .alcohol_item>div.min_height{min-height: 390px;}
  main.lineup .section_alcohol .alcohol_item>div.mb_30_pc{margin-bottom: 30px;}
  main.lineup .section_alcohol .alcohol_item>div.mb_33_pc{margin-bottom: 33px;}
  main.lineup .section_alcohol .alcohol_item>div.mb_40_pc{margin-bottom: 40px;}
  main.lineup .section_alcohol .alcohol_item>div.mb_60_pc{margin-bottom: 60px;}
}
/* //リピート率ナンバーワンアイコン */

/* 絞り込みボタン */
.switch_buttons {
  display: flex;
  gap: 10px;
}
.switch_buttons li {
  width: calc((100% / 2) - 5px);
}  
.switch_buttons li button {
    color: #fff;
    text-align: center;
    padding: 8px 10px;
    border-radius: 30px;
    width: 100%;
    background: var(--black);
    opacity: 0.5;
}
.switch_buttons .js-switch-btn.is-active {
  opacity: 1;
}
@media (min-width: 768px) {
  .switch_buttons {
    gap: 20px;
  }
  .switch_buttons li {
    width: calc((100% / 2) - 10px);
  }  
}

main.lineup .section_alcohol {padding-top: 0;}
main.lineup .section_alcohol .alcohol_outer{margin-bottom: 0;}
main.lineup .section_alcohol .flavor_kinds{
  font-size: 12px;
}
main.lineup .section_alcohol .flavor_kinds li {margin-bottom: 4px;}
main.lineup .table th:last-child{border-top: 0;}
main.lineup .table td{
  color: var(--black);
  background: var(--white);
}
@media (min-width: 768px) {
  main.lineup .section_alcohol .alcohol_outer{
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
  }
  main.lineup .section_alcohol .alcohol_item{
    width: calc((100% - 40px) / 2);
    margin-bottom: 0;
  }
}

main.lineup .full_seal_box .full_seal_des{text-align: center;}
main.lineup .full_seal_box .full_seal_des_outer{margin: 20px 0 40px;}
main.lineup .full_seal_box .full_seal_des img{
  width: 50%;
  margin: 0 auto;
  display: block;
}
main.lineup .full_seal_box .full_seal_des div:last-child {
  width: 80%;
  margin: 0 auto;
}
.inner.full_seal_des_outer{padding: 30px 20px!important;}
@media (min-width: 768px) {
  main.lineup .full_seal_box .full_seal_des{text-align: left;}
  main.lineup .full_seal_box .full_seal_des div:last-child{
    width: 20%;
    order: 1
  }
  main.lineup .full_seal_box .full_seal_des div:first-child {
    width: 70%;
    order: 2
  }
  .inner.full_seal_des_outer{padding: 50px 60px 30px!important;}
  main.lineup .full_seal_box .full_seal_des img{
    width: 100%;
  }
  main.lineup .full_seal_box .full_seal_des{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    position: relative;
    max-width: 600px;
    margin: 0 auto;
  }
  main.lineup .full_seal_box .full_seal_des_outer{margin: 40px 0 40px;}
}

/* ---------- 下層ページ 最短発送ページ ---------- */
/* コピーボタン */
.copy_box {
  max-height: 400px;
  overflow-y: scroll;
  background: var(--main_color_03);
}
@media (min-width: 768px) {
  .copy_box {
    max-height: none;
    overflow-y: auto;
  }
}

/* ---------- 下層ページ LINEリッチメニューからのページ Amazonギフト ---------- */
main.amazongift .introduction_des img{
  width: 80%;
  display: block;
  margin: 0 auto;
}
@media (min-width: 768px) {
  main.amazongift .introduction_des{
    display: flex;
    gap: 20px;
  }
  main.amazongift .introduction_des img{
    max-width: 220px;
    object-fit: contain;
  }
}

/* ---------- 下層ページ テンプレートダウンロード　ログインページ ---------- */
/* form .btn {
  color: var(--main_color);
  padding: 0;
  margin-top: 30px;
}
form .btn button {
  width: 100%;
  padding: 15px 10px 15px 15px;
  background: url(../images/arrow_green.svg) calc(50% - 40px) center / 8px 7px no-repeat;
} */
form input {
  color: var(--main_color);
  background: var(--white);
  border: 1px solid var(--gray);
  width: 100%;
  max-width: 330px;
  padding: 10px;
  border-radius: 5px;
  text-align: left;
  font-size: 16px;
}
.err_box {
    border: solid 1px var( --black);
    background: var(--main_color_03);
    border-radius: 10px;
    padding: 20px;
    max-width: 500px;
    margin: 0 auto 20px;
}

/* ---------- 下層ページ テンプレートダウンロード ---------- */
main.templates_download .samples_list .samples_box{
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 6px;
}
@media (min-width: 768px) {
  main.templates_download .samples_list .samples_box{
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 6px;
  }
}

/* ---------- 下層ページ 利用規約 ---------- */
.terms{color: var(--black);}
.terms dl {
  padding: 20px 0;
  border-bottom: solid 1px var(--gray);
}
.terms .privacy dl:first-of-type {padding: 0 0 20px;}
.terms dt {
  color: var(--main_color_01);
  margin-bottom: 20px;
}
.terms dd{font-weight: 500;}
.terms dd ul li {
  padding-left:1.0em;
  text-indent:-1.0em;
}
@media (min-width: 768px) {
  .terms dl {padding: 40px 0;}
  .terms .privacy dl:first-of-type {padding: 0 0 40px;}
}

/* ---------- 下層ページ 制作マニュアル ---------- */
.manual .manual_pc {
  background: var(--main_color) url(../images/contents_bg_manual.jpg) center bottom / 100% no-repeat;
}
.manual .subtitle img {
  max-width: 330px;
  height: auto;
}
.manual .subtitle::after {
  display: none;
}
.manual .cat:nth-of-type(n + 2) {
  padding: 20px 20px 0;
}
.manual .box {
  padding: 0;
}
.manual .box .list_box {
  border-radius: 5px;
  padding: 70px 20px 20px;
  color: var(--main_color);
}
.manual .box .list_box:nth-of-type(1) {
  background: var(--white) url(../images/icon_1.svg) center 12px / 50px 57px no-repeat;
}
.manual .box .list_box:nth-of-type(3) {
  background: var(--white) url(../images/icon_2.svg) center 12px / 50px 57px no-repeat;
}
.manual .box .list_box:nth-of-type(5) {
  background: var(--white) url(../images/icon_3.svg) center 12px / 50px 57px no-repeat;
}
.manual .box .list_box:nth-of-type(7) {
  background: var(--white) url(../images/icon_4.svg) center 12px / 50px 57px no-repeat;
}
.manual .box .list_box .contents_wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.manual .box .list_box .contents_box {
  padding: 20px;
  border-radius: 5px;
  /* margin-top: 30px; */
}
.manual .box .list_box .contents_wrap .contents_box:nth-of-type(n + 2) {
  margin-top: 0;
}
.manual .box .list_box .contents_wrap .contents_box ul {
  margin-top: 5px;
}
.manual .box .contents_box .type_name {
  position: relative;
  text-align: center;
  margin-bottom: 32px;
}
.manual .box .contents_box .type_name::after {
  position: absolute;
  bottom: -12px;
  left: calc(50% - 17px);
  content: '';
  width: 34px;
  height: 2px;
  background: var(--main_color_01);
}
.manual .box .contents_box .type_list li {
  padding: 20px 0;
  padding: 65px 0 20px;
  border-bottom: solid 1px var(--gray);
}
.manual .box .contents_box .type_list li:nth-of-type(1) {
  background: url(../images/icon_black_1.svg) center top / 40px 57px no-repeat;
  /* background: url(../images/icon_1_black.svg) center top / 32px 38px no-repeat; */
}
.manual .box .contents_box .type_list li:nth-of-type(2) {
  background: url(../images/icon_black_2.svg) center 12px / 40px 57px no-repeat;
  /* background: url(../images/icon_2_white.svg) center 16px / 32px 38px no-repeat; */
}
.manual .box .contents_box .type_list li:nth-of-type(3) {
  background: url(../images/icon_black_3.svg) center 12px / 40px 57px no-repeat;
  /* background: url(../images/icon_3_white.svg) center 16px / 32px 38px no-repeat; */
}
.manual .box .contents_box .type_list li:first-child {
  padding-top: 50px;
}
.manual .box .contents_box .type_list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.manual .box .img_guide_box {
  background: var(--white);
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  margin-bottom: 20px;
}
.manual .box .img_guide_box img {
  max-width: 800px;
  margin: 0 auto;
}
.manual .box .arrow {
  text-align: center;
  padding: 13px 0 25px;
}
.manual .box .arrow img {
  width: 20px;
  transform: rotate(90deg);
  filter: var(--filter_black);
}
@media (min-width: 768px) {
  .manual .subtitle img {
    max-width: 580px;
  }
  .manual .box .list_box {
    border-radius: 10px;
    padding: 20px 40px 40px 80px;
    background-position: 20px 16px !important;
  }
  .manual .box .list_box .contents_wrap {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .manual .box .list_box .contents_box {
    padding: 30px;
    border-radius: 10px;
  }
  .manual .box .contents_box .type_name {
    margin-bottom: 42px;
  }
  .manual .box .contents_box .type_name::after {
    bottom: -15px;
    left: calc(50% - 30px);
    width: 60px;
    height: 3px;
  }
  .manual .box .contents_box .type_list li {
    padding: 20px 20px 20px 56px;
    background-size: 40px 47px !important;
  }
  .manual .box .contents_box .type_list li:first-child {
    padding-top: 2px;
  }
  .manual .box .contents_box .type_list li:nth-of-type(1) {
    background-position: left top;
  }
  .manual .box .contents_box .type_list li:nth-of-type(n + 2) {
    background-position: left 16px;
  }
  .manual .box .arrow {
    padding: 18px 0 30px;
  }
}

/* ---------- 下層ページ canvaマニュアル　ロゴオリシャン制作マニュアル　背景透過マニュアル（人物切り抜き） ---------- */
.manual_step img{
  width: auto;
  max-width:100%;
}
.step_area {
  position: relative;
}
.step_area > ul > li {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  position: relative;
}
.step_area > ul > li:not(:last-child){
  padding: 0 0 50px 0;
}
.step_area ul > li.step_area_list:after {
  content: "";
  position: absolute;
  top: 0;
  left: 68px;
  right: 0;
  width: 10px;
  height: 100%;
  background: var(--white);
  z-index: 1;
}
.step_area li.step_area_list:last-of-type::after {
  display: none;
}
.step_area > ul > li .step_icon {
  position: relative;
  padding: 5px;
  width: 120px;
  line-height: 27px;
  color: var(--white);
  font-size: 17px;
  padding: 30px 0 30px;
  text-align: center;
  background: var(--main_color_01);
  justify-content: center;
  text-align: center;
  border-radius: 60px;
  z-index: 9;
  font-size: 21px;
  letter-spacing: 0.1em;
}
.step_area > ul > li .step_icon span{margin-top: 7px;display: block;font-size: 48px;}
.step_area > ul > li .step_text_area {
  position: relative;
  width: calc(100% - 180px);
  border: 2px solid var(--black);
  background: var(--white);
  padding: 30px;
  border-radius: 16px;
}
.step_area > ul > li .step_text_area .step_title {
  font-size: 25px;
  margin-bottom: 30px;
}
.step_area > ul > li .step_text_area .step_inner {
  display: flex;
  background: var(--main_color_03);
  padding: 30px;
}
.step_area > ul > li .step_text_area .step_img {
  min-width: 220px;
  max-width: 100%;
}
.step_area > ul > li .step_text_area .step_text {
  width: 100%;
  color: var(--black);
  padding: 20px 0 0 20px;
  text-align: left;
  /* letter-spacing: -0.0em; */
  -ms-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  word-break: break-word;
  font-size: 13.5px;
}
.thumbnail {
  cursor: pointer;
}
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.modal.active {
  display: flex;
}
.modal video {
  max-width: 90%;
  max-height: 90%;
}
.modal img {
  max-width: 90%;
  max-height: 90%;
}
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 32px;
  color: var(--sub_color);
  background: #ffffff;
  padding: 0px 20px 5px 20px;
  cursor: pointer;
  z-index: 9999;
}
.app_introduction ul{
  display: flex;justify-content: space-between;width: 100%;max-width: 650px;margin: 50px auto;
}
.app_introduction ul .app_introduction_text{
  width: 350px;
}
.app_introduction ul .app_introduction_link a{
  color: var(--main_color_01);
  border: 1px solid var(--main_color_01);
  background: var(--white);
  padding: 10px 15px;
  display: block;
  border-radius: 50px;margin: 5px 0;
}
@media screen and (max-width:768px) {
  .step_area > ul > li {
    justify-content: space-between;
  }
  .step_area ul li .step_icon {
    margin: 0 0 20px 0;
    width: 64px;
    font-size: 14px;
    line-height: 20px;
    padding: 10px 0 10px;
  }
  .step_area > ul > li .step_icon span {
    margin-top: 4px;
    display: block;
    font-size: 28px;
  }
  .step_area li:after {
    left: 35px;
  }
  .step_area > ul > li .step_text_area .step_inner {
    flex-wrap: wrap;
    padding: 20px;
    justify-content: center;
  }
  .step_area > ul > li .step_text_area .step_title {
    font-size: 16px;
    margin-bottom: 10px;
  }
  .step_area > ul > li .step_text_area .step_text {
    padding: 10px 0 0 0;
    width: 100%;
  }
  .step_area > ul > li .step_text_area .step_img {
    min-width: auto;
  }
  .step_area > ul > li .step_text_area {
    position: relative;
    width: calc(100% - 80px);
    border: 5px solid #fff;
    padding: 20px;
    border-radius: 20px;
  }
  .step_area ul > li.step_area_list:after {
    left: 27px;
  }
  .app_introduction ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  .app_introduction ul .app_introduction_img {
    margin-bottom: 40px;
  }
  .app_introduction ul .app_introduction_text {
    width: 100%;
  }
}

/* ---------- 下層ページ ボトルイメージ制作 ---------- */
.bottledesignviewer iframe{
  min-height: 1120px;
  border-radius: 20px;
}
@media screen and (min-width:400px) {
  .bottledesignviewer iframe{min-height: 1140px;}
}
@media screen and (min-width:450px) {
  .bottledesignviewer iframe{min-height: 1170px;}
}
@media screen and (min-width:500px) {
  .bottledesignviewer iframe{min-height: 1240px;}
}
@media screen and (min-width:600px) {
  .bottledesignviewer iframe{min-height: 1320px;}
}
@media screen and (min-width:700px) {
  .bottledesignviewer iframe{min-height: 1420px;}
}
@media screen and (min-width:800px) {
  .bottledesignviewer iframe{min-height: 1520px;}
}
@media screen and (min-width:900px) {
  .bottledesignviewer iframe{min-height: 1620px;}
}
@media screen and (min-width:1000px) {
  .bottledesignviewer iframe{min-height: 1720px;}
}

/* ---------- 下層ページ 制作実績 ---------- */
main.productions .productions_wrap:first-child{margin-bottom: 20px;}
main.productions .section_productions{margin-bottom: 40px;}
main.productions .productions_list_img ul li:nth-child(n+18) {display: none; /* 18個目以降を非表示 */}
main.productions .productions_list_img ul.show-all li {display: block; /* ボタンクリック後に全て表示 */}
main.productions .section_design .liner_pink.slide {
  max-width: 400px;
  margin: 0 auto;
  padding: 40px 0;
}
main.productions .section_productions .productions_list {margin-bottom: 30px;}
@media (min-width: 768px) {
  main.productions .section_productions .productions_list {margin-bottom: 40px;}
  main.productions .modaal-content-container{padding: 60px}
  main.productions .productions_wrap:first-child{margin-bottom: 40px;}
  main.productions .section_productions{margin-bottom: 60px;}
  main.productions .productions_list_img ul li:nth-child(n+16) {display: none;/* 16個目以降を非表示 */}
  main.productions .productions_list_img ul.show-all li {display: block; /* ボタンクリック後に全て表示 */}
  main.productions .section_productions .swiper-button-lock{display: none;}
}

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

アニメーション

--------------------------------------*/
/* 左からヒュッ */
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
  animation-delay: 0.4s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;
	opacity:0;
}
@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }
  to {
    opacity:1;  
  }
}
.bgappear{ /* 中の要素 */
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}
@keyframes bgextendAnimeSecond{
	0% {
    opacity: 0;
	}
	100% {
    opacity: 1;
  }
}
.bgLRextend::before{ /* 左から */
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--main_color_01); /* 伸びる背景色の設定 */
  z-index: 1;
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/* 順番にフェードアップ */
.fadeUp {
  animation-name:fadeUpAnime;
  animation-duration:0.6s;
  animation-delay: 0.3s;
  animation-fill-mode:forwards;
  opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeRight {
  animation-name:fadeRightAnime;
  animation-duration:0.6s;
  animation-delay: 0.3s;
  animation-fill-mode:forwards;
  opacity: 0;
}
@keyframes fadeRightAnime{
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.delay_1 {animation-delay: 0.6s;}
.delay_2 {animation-delay: 1s;}
.delay_3 {animation-delay: 1.4s;}

/* マーカー */
.marker {
  font-size: 1.3em;
  position: relative;
  display: inline-block;
  overflow: hidden;
  color: #fff;
  padding: 2px 10px 1px;
  line-height: 1.5;
  z-index: 0;
  width: max-content;
}
.marker::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--main_color_01);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.5s ease;
  z-index: -1;
}
.marker.active::before {
  transform: scaleX(1);
}

/* ホバーでぴょい */
.btn_up{transition:all 0.4s;}
.btn_up:hover{
	-webkit-transform: translate(0, -2px);
  	transform: translate(0, -2px);
}

/* スライド */
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal{
  bottom: 0;
}
section:not(.section_option,.section_design) .swiper-slide {
  transition: transform .4s ease;
  transform: scale(.85);
  will-change: transform;
}
section:not(.section_option,.section_design) .swiper-slide-active {
  transform: scale(1);
}
.section_option .option_acrylic .swiper {
    padding: 0 100px 30px 0;
    box-sizing: border-box;
}
.section_option .option_cap .swiper {
    padding: 0 80px 30px 0;
    box-sizing: border-box;
}
.section_option .option_cap .swiper img{height: 160px;width: auto;}
@media (min-width: 768px) {
  section.section_alcohol .swiper{padding-right: 40px;}
  section.section_alcohol .swiper-slide-active{margin: 0 20px;}
  section.section_alcohol .swiper-slide-prev,section.section_alcohol .swiper-slide-next{transform: scale(1);}
  .section_option .option_acrylic .swiper {
      padding: 0 130px 30px 0;
  }
  .section_option .option_cap .swiper {
      padding: 0 100px 30px 0;
  }
}