@charset "utf-8";

*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)){
all:unset;display:revert}
*,*::before,*::after{box-sizing:border-box;font-style:normal}
a,button{cursor:revert}
ol,ul,menu{list-style:none}
img{max-width:100%}
table{border-collapse:collapse}
textarea{white-space:revert}
meter{-webkit-appearance:revert;appearance:revert}
::placeholder{color:unset}
:where([hidden]){display:none}
:where([contenteditable]){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space}
:where([draggable="true"]){-webkit-user-drag:element}
ul,dl,ol,li,dt,dd{margin:0;padding:0}

html{font-size:62.5%;line-height:1.6;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;word-break:break-all;font-feature-settings:"palt"}

body{
  margin:0;
  padding:0;
  background-color:#f8fafd;
  color:#333;
  font-size: 1.5rem;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-display: swap;
  font-weight: 500;
  line-height: 1.6;
}

a,area,button,input,label,select,summary,textarea,
[tabindex] {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

a {
  color: #333;
  text-decoration: underline;
  cursor: pointer;
}

a.no-line { text-decoration: none;}

a:visited,
a:focus,
a:active { color: #333;}



@media (hover: hover) {
a { transition: all .5s ease;}
a:hover { color: #0096d0; opacity: 0.8;}
a.no-fade:hover { opacity: 1;}
}/* End hover */

.serif{
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-display: swap;
  font-weight: 500;
}

.en-sans-serif{
  font-family: 'Lato', sans-serif;
  font-display: swap;
  font-weight: 400;
}

.svg-icon{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: all .5s ease;
}

.wrap{
  position: relative;
  margin: 0;
  padding: 0 0;
  width: 100%;
  display: block;
}


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

.pc-none{ display: none;}

}/* End min 641 */



/*** HEADER ***/

#HEADER{
  position: relative;
  top: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #fff;
  z-index: 999;
}

.wrap-hiroshima #HEADER{ border-bottom: 0.5rem solid #9DC3E6;}
.wrap-ouest #HEADER{ border-bottom: 0.5rem solid #f5d677;}
.wrap-wasizu #HEADER{ border-bottom: 0.5rem solid #ccf;}

.menu-on #HEADER{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  transition: all .5s ease;
}

.head-menu{
  position: relative;
  margin: 0 auto;
  padding: 1rem 0 1rem;
  width: 92%;
  max-width: 78rem;
  display: flex;
  align-items: flex-end;
  background-color: #fff;
  z-index: 100;
}

.head-main-menu{
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.head-main-menu .head-link-icon{ padding: 0 0.8rem 0 0;}

.head-main-menu .head-link-icon:first-child{
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
}
/*
.head-main-menu .head-link-icon:nth-child(3){ margin-right: 4.4rem;}
*/
@media screen and (max-width: 460px) {

.head-main-menu .head-link-icon:nth-child(2),
.head-main-menu .head-link-icon:nth-child(3){ display: none;}

}/* End max 460 */

.head-link-icon a{
  position: relative;
  margin: 0;
  padding: 0.5rem;
  width: 4rem;
  height: 4rem;
  display: block;
  transition: all .5s ease;
}

.head-link-icon:nth-child(2) a{ padding: 0.7rem;}

.head-link-icon .svg-link{ fill:#646464;}
.head-link-icon .svg-link-active{ fill:#0096d0;}



.head-link-icon .cart-item{
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  margin: 0;
  padding: 0;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2em;
  border: solid 0.1rem #fff;
  background-color: #0096d0;
  color: #fff;
  font-size: 1rem;
  line-height: 1;
}

@media (hover: hover) {

a:hover .svg-link{ fill:#0096d0; opacity: 1;}

.head-sub-menu a { transition: all .5s ease;}
.head-sub-menu a:hover { color: #0096d0; opacity: 1;}

}/* End hover */

/* GLOBAL MENU */

.burger-menu{
  position: relative;
  margin: 0;
  padding: 0;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.5s ease;
  z-index: 1000;
}

.burger-menu strong{ display: none;}

.burger-menu em{
  position: relative;
  margin: -0.1rem 0 0;
  padding: 0;
  width: 2.4rem;
  height: 0.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #646464;
  cursor:pointer;
  outline: 0;
  transition: .2s;
}

.burger-menu em:before,
.burger-menu em:after {  
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #646464;
  transition: .2s;
  content: "";
}

.burger-menu em:before { transform: translateY(-0.7rem);}
.burger-menu em:after { transform: translateY(0.7rem);}
.burger-menu.active em { background-color: transparent;}
.burger-menu.active em:before { background-color: #0096d0; transform: rotate(45deg);}
.burger-menu.active em:after { background-color: #0096d0; transform: rotate(-45deg);}

@media (hover: hover) {

.burger-menu:hover em,
.burger-menu:hover em:before,
.burger-menu:hover em:after { background-color: #0096d0;}
.burger-menu:hover.active em { background-color: transparent;}


}/* End hover */


.head-sub-menu{
  position: fixed;
  top: 0;
  left: 100vw;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: -999;
  pointer-events: none;
  transition: all 0.5s ease;
  opacity: 0;
}

.head-sub-menu.active{
  left: 0;
  display: flex;
  z-index: 999;
  pointer-events: all;
  opacity: 1;
}

.head-sub-menu-list{
  position: absolute;
  top: 0;
  left: -2rem;
  margin: 0 0 5em 0;
  padding: 3em 2.5em 5em;
  width: calc(100% + 4rem);
  height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
  transition: all 0.5s ease;
  background-color: #292929;
  opacity: 0;
}

.head-sub-menu.active .head-sub-menu-list{ opacity: 1;}

.head-sub-menu-list li{
  margin: 0.5em auto 0;
  padding: 0;
  width: 92%;
  max-width: 78rem;
  border-bottom: .1rem dotted #999;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
  text-align: left;
}

.head-sub-menu-list a{
  position: relative;
  margin: 0;
  padding: 0.5em 0;
  width: 100%;
  display: block;
  color: #fff;
  text-decoration: none;
}

/* HEAD SEARCH */
/*
.head-search-block{
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 92%;
  max-width: 78rem;
  z-index: 1;
}

.head-search-block .icon-button{
  position: absolute;
  top: -5rem;
  right: 9.6rem;
  margin: 0;
  padding: 0.5rem;
  width: 4rem;
  height: 4rem;
  display: block;
  transition: all .5s ease;
}
  
.head-search-block .icon-button .svg-link{ fill:#646464;}
.head-search-block .icon-button.active .svg-link { fill:#0096d0; opacity: 1;}
*/

/*
@media (hover: hover) {
.head-search-block .icon-button:hover .svg-link{ fill:#0096d0; opacity: 1;}
.head-search-block .icon-button { transition: all .5s ease;}
.head-search-block .icon-button:hover { color: #0096d0; opacity: 1;}
}/* End hover */

/*
.head-search{
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 0;
  display: none;
  z-index: -999;
  pointer-events: none;
  transition: all 0.4s ease;
  opacity: 0;
}

.menu-on .head-search{ display: block;}

.head-search.active{
  padding: 1.5em 0 0;
  height: inherit;
  z-index: 999;
  pointer-events: all;
  opacity: 1;
}

.head-search::before{
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0.1rem;
  background-color: #ccc;
  transition: all 0.2s 0.5s ease;
  content: "";
}

.head-search.active::before{ width: 100%;}
*/

/* PAGE TOP */
.page-top{ opacity: 0;}


/*** CONTENTS ***/

.gamo-order-intro{
  margin: auto;
  padding: 0;
  width: 92%;
  max-width: 78rem;
  display: block;  
}

.gamo-order-title{
  margin: 0;
  padding: 1.5em 0 0;
  font-size: min(max(2.8rem, calc(2.8rem + ((1vw - 0.48rem) * 0.6667))), 3rem);
  font-family: 'Lato', sans-serif;
  font-display: swap;
  font-weight: 400;
  line-height: 1.2;
  min-height: 0vw;
}

.gamo-order-title em img{ width: 100%; max-width: 64rem; aspect-ratio:492/58;}

.gamo-order-intro .user-name{
  padding: 0.5em 0 1.5em;
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
}

.gamo-order-bg-image{
  position: fixed;
  top: 0;
  margin: 0;
  padding: 0 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  text-align: center;
  z-index: -1;
  pointer-events: none;
  opacity: 0.15;
}
.gamo-order-bg-image img{
  margin: auto;
  padding: 0 0;
  width: 100%;
  max-width: 116.2rem;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 0%;
}

.gamo-order-bg-image::before{
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: #f8fafd;
  content: "";
  z-index: 1;
  mix-blend-mode: multiply;
}


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

.gamo-order-bg-image{ height: 96%;}
.gamo-order-bg-image img{ object-position: 54% 0%;}

}/* End max 480 */

.contents-title{
  position: relative;
  margin: 0 0 1.5em;
  padding: 1.5em 0.5em;
  display: block;
}

.contents-title::after{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 2em;
  height: 0.3rem;
  display: block;
  background-color: #0096d0;
  content: "";
}

.contents-title em{
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 0vw;
  display: block;
  font-size: min(max(2.8rem, calc(2.8rem + ((1vw - 0.48rem) * 0.6667))), 3rem);
  font-weight: normal;
  line-height: 1.2;
  text-align: center;
}

.contents-title span{
  display: block;
  color: #666;
  font-size: 1.4;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}







#CONTENTS{
  position: relative;
  width: 100%;
  z-index: 1;
}

.section-nomal{
  position: relative;
  margin: auto;
  width: 92%;
  max-width: 78rem;
}

.section-full{
  position: relative;
  margin: auto;
  width: 100%;
}

.section-inner{
  position: relative;
  margin: auto;
  width: 100%;
}

.section-full .section-inner{
  position: relative;
  margin: auto;
  width: 92%;
  max-width: 78rem;
}


.section-title{
  position: relative;
  margin: 0;
  padding: 1em;
  min-height: 0vw;
  font-size: min(max(2.4rem, calc(2.4rem + ((1vw - 0.42rem) * 1.7241))), 3rem);
  font-weight: normal;
  line-height: 1.4;
}

p.txt{
  font-size: 1.5rem;
  line-height: 1.6;
}

ul.notice{
  position: relative;
  margin: 0 0 1em;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1.6;
}

ul.notice li{
  position: relative;
  margin: 0.25rem 0;
  padding: 0 0 0 1em;
}

ul.notice li::before{
  position: absolute;
  top: 0;
  left: 0;
  color: #c00;
  content: "\203B";
}






/* NAVI */

.gamo-order-navi{
  margin: 3em auto;
  padding: 0;
  width: 92%;
  max-width: 78rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: 2rem;

}

.gamo-order-navi li{
  margin: 1rem 0;
  padding: 0;
  width: calc(25% - 1.5rem);
  display: block;
  aspect-ratio:1/1;
}


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

.gamo-order-navi{ column-gap: 1.8rem;}

.gamo-order-navi li{
  margin: 0.9rem 0;
  width: calc(33.333333333333333333333333333% - 1.2rem);
}

}/* End max 768 */


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

.gamo-order-navi{ column-gap: 2rem;}

.gamo-order-navi li{
  margin: 1rem 0;
  width: calc(50% - 1rem);  
}

}/* End max 480 */


.gamo-order-navi a{
  position: relative;
  margin: 0;
  padding: 100% 0 0;
  width: 100%;
  height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 0.8em;
  color: #646464;  
  background-color: #fff;  
  filter: drop-shadow(0 0 1rem rgba(0,0,0,0.2));
}

.gamo-order-navi .svg-icon{
  position: absolute;
  top: 1em;
  left: 1em;
  margin: 0;
  padding: 0;
  width: 3rem;
  height: 3rem;
  display: block;
}

.navi-search .svg-link{ fill:#65b5ff;}
.navi-fav .svg-link{ fill:#ff658a;}
.navi-barcord .svg-link{ fill:#000;}
.navi-inquiry .svg-link{ fill:#ffa765;}
.navi-05 .svg-link{ fill:#73ce8c;}
.navi-faq .svg-link{ fill:#ff7b65;}
.navi-mypage .svg-link{ fill:#909090;}
.navi-guide .svg-link{ fill:#ffd75f;}



@media (hover: hover) {

.navi-search a:hover .svg-link{ fill:#65b5ff;}
.navi-fav a:hover .svg-link{ fill:#ff658a;}
.navi-barcord a:hover .svg-link{ fill:#000;}
.navi-inquiry a:hover .svg-link{ fill:#ffa765;}
.navi-05 a:hover .svg-link{ fill:#73ce8c;}
.navi-faq a:hover .svg-link{ fill:#ff7b65;}
.navi-mypage a:hover .svg-link{ fill:#909090;}
.navi-guide a:hover .svg-link{ fill:#ffd75f;}

.menu-on .gamo-order-navi a { transition: all .5s ease; top: 0;}
.gamo-order-navi a:hover { opacity: 1; top: -0.5em; filter: drop-shadow(0 0.5em 1rem rgba(0,0,0,0.2));}

}/* End hover */



.gamo-order-navi p{
  position: absolute;
  left: 1em;
  bottom: 1em;
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  font-size: 1.4rem;
  line-height: 1.5;
}

.gamo-order-navi p strong{
  display: block;
  color: #333;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.3;
}




/* LINK button */

.link-button{
  width: 100%;
  display: flex;
}

.link-button.center{ justify-content: center;}
.link-button.space-between{ justify-content: space-between;}
.link-button.flex-end{ justify-content: flex-end;}

.link-button a{
  position: relative;
  margin: 0;
  padding: 0.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3em;
  background-color: #0096d0;
  text-decoration: none;
  color: #fff;
}


.link-button.size-s a{ width: 90%; max-width: 20rem;}
.link-button.size-m a{ width: 90%; max-width: 48rem;}
.link-button.size-l a{ width: 90%; max-width: 60rem;}
.link-button.size-full a{ width: 100%;}

.link-button.font-s a{ font-size: 1.4rem;}
.link-button.font-m a{ font-size: 1.6rem;}
.link-button.font-l a{ font-size: 2rem;}

.link-button.home-delivery a{ background-color: #0096d0;}

  
  
@media (hover: hover) {

.link-button a{ transition: all 0.3s ease;}


}/* End hover */





/* ===================================================================
 FORM
=================================================================== */


.form-table {
  position: relative;
  margin: 0.5em 0 2em;
  padding: 0;
  width: 100%;
  overflow: hidden;
  border-top: solid 0.1rem #ccc;
  border-spacing: 0;
  background-color: #fff;
  text-align: left;
}

.form-table th,
.form-table td{
  margin: 0;
  padding: 1.5em;
  border-bottom: solid 0.1rem #ccc;
  font-size: 1.5rem;
  line-height: 1.5;
}

.form-table th{ width: 28rem; background-color: #efefef; font-weight: normal;}
.form-table td{ width: calc(100% - 28rem);}


.gamo-form *:focus { outline: none;}

.gamo-form select option { padding: 0;}
.gamo-form label { cursor: pointer;}

.gamo-form input,
.gamo-form select{
  position: relative;
  padding: 0.6em;
  width: 100%;
  display: block;
  outline: none;
  border-radius: 0.3em;
  border: solid #eee 0.1rem;
  box-sizing: border-box;
  background-color: #fff;
  font-size: 1.6rem;
  /*filter: drop-shadow(0 0 0.5rem rgba(0,0,0,0.2));*/
}

.gamo-form select{
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff;
  position: relative;
}

.gamo-form select::-ms-expand { display: none;}

.gamo-form input::placeholder { color: #a8a8a8;}
.gamo-form input:-ms-input-placeholder { color: #a8a8a8;}
.gamo-form input::-ms-input-placeholder { color: #a8a8a8;}

.gamo-form textarea::placeholder { color: #a8a8a8;}
.gamo-form extarea::-ms-input-placeholder { color: #a8a8a8;}
.gamo-form extarea::-ms-input-placeholder { color: #a8a8a8;}

.gamo-form .radio{ display: none;}

.gamo-form .radio + .label-inner{
  position:relative;
  margin: 0 1em 0 0;
  padding: 0 0 0 1.5em;
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1.5;
}

.gamo-form .radio + .label-inner:before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 1.4rem;
  height: 1.4rem;
  display: block;
  border: 0.1rem solid #999;
  border-radius: 50%;
  background-color: #fff;
  content: "";
}

.gamo-form .radio:checked + .label-inner{
  color: #0096d0;
  font-weight: bold;
}

.gamo-form .radio:checked + .label-inner:after{
  position: absolute;
  top: 0;
  left: 0.2rem;
  bottom: 0;
  margin: auto;
  width: 1rem;
  height: 1rem;
  display: block;
  background: #0096d0;
  border-radius: 50%;
  content: "";
}

.gamo-form .checkbox {display: none;}

.gamo-form .checkbox + .label-inner{
  position:relative;
  margin: 0 1em 0 0;
  padding: 0 0 0 1.5em;
  display: block;
  font-size: 1.6rem;
  line-height: 1.4;
}

.gamo-form .checkbox + .label-inner:before{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 1.6rem;
  height: 1.6rem;
  display: block;
  border: 0.1rem solid #999;
  border-radius: 0.2em;
  background-color: #fff;
  content: "";
}

.gamo-form .checkbox:checked + .label-inner{
  color: #0096d0;
  font-weight: bold;
}

.gamo-form .checkbox:checked + .label-inner:after{
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  width: 1.4rem;
  height: 0.8rem;
  display: block;
  border-left: 0.3rem solid #0096d0;
  border-bottom: 0.3rem solid #0096d0;
  transform: rotate( -45deg );
  content: "";
}

.gamo-form textarea{
  position: relative;
  margin: 0;
  padding: 0.6em;
  width: 100%;
  height: 8.7em;
  display: block;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 0.4em;
  border: 0.1rem solid #ccc;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: left;
}

span.required,
.gamo-form th .required{
  margin: 0 0 0 0.5em;
  padding: 0.1em 0.5em;
  border-radius: 0.2rem;
  background-color: #EE5566;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}

.gamo-form td .caution{
  padding: 0 0 1em 0;
  display: block;
  color: #f60;
  font-size: 1.6rem;
}

.gamo-form .list-dl .list-ol{ margin: 0; padding: 0;}
.gamo-form .list-dl .list-ol li{ padding: 0 0 0.5em;}



.form-agree{
  margin: 2em auto 0;
  padding: 1.5em 0.5em;
  width: 100%;  
  background-color: #fff;
}

.form-agree label{
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4;
}

.checkbox-input{ display: none;}

.checkbox-parts{
  position:relative;
  margin: 0 0.5rem 0 0;
  padding: 1.8rem 0 0 0;
  width: 2.5rem;
  height: 0;
  display: block;
  overflow: hidden;
  line-height: 300;
}

.checkbox-parts:before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 1.8rem;
  height: 1.8rem;
  border: 0.2rem solid #ccc;
  border-radius: 0.2em;
}


.checkbox-input:checked + .checkbox-parts:after{
  position: absolute;
  top: 0;
  left: 0.7rem;
  width: 1.6rem;
  height: 0.9rem;
  display: block;
  border-left: 0.4rem solid #0096d0;
  border-bottom: 0.4rem solid #0096d0;
  transform: rotate( -45deg );
  content: "";
  z-index: 100;
}


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

.form-table { border-top: none;}

.form-table th{
  padding: 1em;
  width: 100%;
  display: block;
  border-bottom: none;
}

.form-table td{
  padding: 1em 1em 2em 1.5em;
  width: 100%;
  display: block;
  border: none;
}


}/* max-767 */



.form-table .name-dl{
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  overflow: hidden;
}

.form-table .name-dl dt{
  float: left;
  margin: 0;
  padding: 0.8em 0 0;
  width: 1.5em;
  display: block;
  font-size: 1.4rem;
}

.form-table .name-dl dd{
  float: left;
  margin: 0;
  padding: 0 1em 0 0;
  width: calc(50% - 1.5em);
  display: block;
}

.select-block{
  position: relative;
  display: block;
}

.select-block{ width: 50%;}
/**/
.select-block:before{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1rem;
  margin: auto;
  width: 0.6rem;
  height: 0.6rem;
  display: block;
  border-bottom: solid 0.2rem #b4b3b3;
  border-right: solid 0.2rem #b4b3b3;
  transform: rotate(45deg);
  content: "";
  pointer-events: none;
  z-index: 100;
}



.gamo-form .input-block{ padding: 0.5rem 0; width: 100%; overflow: hidden;}

.gamo-form .input-block input{ margin: 0 0 1em; width: 100%; display: block;}

.gamo-form .input-block input:last-child{ margin: 0;}

.gamo-form .input-block.size-ss input{margin: 0 0.5em 0 0; width: 6em; display: inline-block;}

.gamo-form .input-block.size-m input{margin: 0 0.5em 0 0; width: 35%; display: inline-block;}




/* error */

.error-txt{ text-align: center; padding: 2em 0 0; color: #c00; }

.form-table tr.error th{ background-color: #ffd5d5;}
.form-table tr.error td{ background-color: #ffeaea;}


form .error-msg{
  padding: 0 0 0.5em 0;
  display: block;
  color: #c00;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: left;
}

form td .error-msg{
  margin: 0;
  padding: 0 0 0.5em 0;
}

.form-agree .error-msg{ text-align: center;}


/* split */

.gamo-form .form-split-none{
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
}

.gamo-form .form-split-none li{
  margin: 0;
  padding: 0.4em 0;
  display: block;
  overflow: hidden;
}


.gamo-form-submit{
  margin: auto;
  padding: 1em 0;
  width: 94%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.gamo-form-button{
  position: relative;
  margin: 0.5em;
  padding: 0.8em 0.5em;
  width: 90%;
  max-width: 32rem;
  border-radius: 3em;
  color: #fff;
  font-size: 1.6rem;
  text-align: center;
  font-weight: normal;
  line-height: 1.5;
  cursor: pointer;
}

.gamo-form-button.submit-button{ background: #0096d0;}
.gamo-form-button.submit-button.order{ background: #0096d0;}
.gamo-form-button.back-button,.gamo-form-button.nomal-button{ background: #ccc;}

.cart-clear-button{ cursor: pointer;}

.gamo-form-submit .return-link{
  position: relative;
  margin: 0.5em;
  padding: 0.8em 0.5em;
  width: 90%;
  max-width: 20rem;
  font-size: 1.6rem;
  text-align: center;
  font-weight: normal;
  line-height: 1.5;
}

.gamo-form-submit .return-link.cart-clear-button{ text-decoration: underline;}

@media (hover: hover) {
.gamo-form-button { transition: all .5s ease;}
.gamo-form-button:hover { opacity: 0.8;}
}/* End hover */


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

.form-table .name-dl dd{
  padding: 0 0 0.5em 0;
  width: calc(100% - 1.5em);
}

.form-table .name-dl dd:last-child{ padding: 0 0;}

.form-table .form-split-none li{
  float: inherit;
  width: 100%;
  white-space: normal;
}

}/* max-767 */






/*** IMAGE ASPECT-RATIO ***/

.aspect-1-1 { aspect-ratio:1/1;}
.aspect-3-2 { aspect-ratio:3/2;}
.aspect-2-1 { aspect-ratio:2/1;}
.aspect-3-1 { aspect-ratio:3/1;}
.aspect-4-3 { aspect-ratio:4/3;}
.aspect-16-9 { aspect-ratio:16/9;}
.aspect-210-48 { aspect-ratio:210/48;}


.mt-1{ margin-top: 1em;}
.mt-2{ margin-top: 2em;}
.mt-3{ margin-top: 3em;}
.mt-4{ margin-top: 4em;}
.mt-5{ margin-top: 5em;}
.mt-6{ margin-top: 6em;}
.mt-7{ margin-top: 7em;}

.mb-1{ margin-bottom: 1em;}
.mb-2{ margin-bottom: 2em;}
.mb-3{ margin-bottom: 3em;}
.mb-4{ margin-bottom: 4em;}
.mb-5{ margin-bottom: 5em;}
.mb-6{ margin-bottom: 6em;}
.mb-7{ margin-bottom: 7em;}

.ml-1{ margin-left: 1em;}
.ml-2{ margin-left: 2em;}
.ml-3{ margin-left: 3em;}
.ml-4{ margin-left: 4em;}

.mr-1{ margin-right: 1em;}
.mr-2{ margin-right: 2em;}
.mr-3{ margin-right: 3em;}
.mr-4{ margin-right: 4em;}

.pt-1{ padding-top: 1em;}
.pt-2{ padding-top: 2em;}
.pt-3{ padding-top: 3em;}
.pt-4{ padding-top: 4em;}
.pt-5{ padding-top: 5em;}
.pt-6{ padding-top: 6em;}
.pt-7{ padding-top: 7em;}

.pb-1{ padding-bottom: 1em;}
.pb-2{ padding-bottom: 2em;}
.pb-3{ padding-bottom: 3em;}
.pb-4{ padding-bottom: 4em;}
.pb-5{ padding-bottom: 5em;}
.pb-6{ padding-bottom: 6em;}
.pb-7{ padding-bottom: 7em;}

.pl-1{ padding-left: 1em;}
.pl-2{ padding-left: 2em;}
.pl-3{ padding-left: 3em;}
.pl-4{ padding-left: 4em;}

.pr-1{ padding-right: 1em;}
.pr-2{ padding-right: 2em;}
.pr-3{ padding-right: 3em;}
.pr-4{ padding-right: 4em;}


/* 文字サイズ変更のボタン ----------------*/
.font-box{
  position: absolute;
  top: 1.2em;
  left: 6.5em;
  margin: auto;
  padding: 0.4rem;
  width: 9.8em;
  display: flex;
  justify-content: space-between;  
  background-color: #efefef;
  border-radius: 3em;
  font-size: 1.3rem;
  line-height: 1;
  text-align: center;
}

.font-box::before{
  position: absolute;
  top: 0.7em;
  left: -2.8em;
  margin: auto;
  font-size: 1.3rem;
  line-height: 1;
  content: "\8868\793A\FF1A";
}

.font-box .font-button{
  margin: 0;  
  padding: 0.5rem 0.8em;
  width: 4.4em;  
  border-radius: 2em;
  background-color: #fff;
  cursor: pointer;
}

.font-box .font-button.active{
  background-color: #0096d0;
  color: #fff;
}



@media screen and (max-width: 600px) {
  .font-box{
    display: none;
  }
}