@charset "utf-8";

/* font /////////////////////////////////////// */
@font-face {
font-family: 'Kosugi Maru';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/css/font/KosugiMaru-Regular.woff2') format('woff2');
}

@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/css/font/Roboto-Bold.woff2') format('woff2');
}


/* default.css/////////////////////////////////////// */
ul, ol, dl {
list-style-type: none;
list-style-position: outside;
}

ol {
counter-reset: num;
}

ol li {
position: relative;
padding:.3rem 0 .3rem 1.5rem;
line-height: 1.5rem;
border:0px #FF0000 solid;
}

ol li::before {
counter-increment: num;
content: "(" counter(num) ")";
position: absolute;
left: 0;
}

table, td, th {
border-spacing: 0px;
border-collapse: collapse;
border: 0px;
padding: 0px;
}

.cr:after, .cr:before, #contents:after, #contents:before {
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1rem;
line-height: 0px;
clear: both;
}


/* image ////////////////*/
img, iframe, svg {
-ms-interpolation-mode: bicubic;
vertical-align: bottom;
max-width: 100%;
}

a img, button img {
border: 0px;
}


/* object-fit: ////////////////*/
.of {
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 50% 50%;
object-position: 50% 50%;
}

.ofc {
-o-object-fit: contain;
object-fit: contain;
}

.ofn {
-o-object-fit: none;
object-fit: none;
}

.ofs {
-o-object-fit: scale-down;
object-fit: scale-down;
}


/* float /////////////////*/
.fl, .left {
float: left;
}

.fr, .right {
float: right;
}

.fn, .none {
float: none;
}

.cr, .clear {
clear: both;
}

.center {
margin: 0 auto;
}


/* display ////////////////////*/
.db {
display: block;
}

.di {
display: inline;
}

.dib {
display: inline-block;
}

.dt {
display: table;
}

.dtc {
display: table-cell;
}

.dn {
display: none;
}

.ds {
display: static;
}

.dsk {
display: sticky;
}

.df {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.jc {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.fg {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
width: 10px;
}


/* overflow ///////////////////////*/
.oh {
overflow: hidden;
}

.os {
overflow-y: scroll;
}

.ov {
overflow: visible;
}

.oa {
overflow: auto;
}

.oxh {
overflow-x: hidden;
}

.osx {
overflow-x: scroll;
}


/* color ///////////////////////*/
.red {
color: #BF6565;
}


/* text ///////////////////////*/
.bold {
font-weight: bold;
}

.tdn {
text-decoration: none;
}

.tdu {
text-decoration: underline;
}

.tsn {
text-shadow: none;
}

.tac {
text-align: center;
}

.tal {
text-align: left;
}

.tar {
text-align: right;
}

.toe {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.toc {
max-width: auto;
white-space: normal;
overflow: auto;
text-overflow: clip;
}

.vat {
vertical-align: top;
}

.vam {
vertical-align: middle;
}

.vab {
vertical-align: bottom;
}

.wn, .nw {
white-space: nowrap;
}

.wa {
white-space: normal;
}

.b, .bold, .fwb {
font-weight: bold;
}

.fwn {
font-weight: normal;
text-stroke-width: 0;
text-stroke-color: #222;
-webkit-text-stroke-width: 0;
-webkit-text-stroke-color: #222;
}

em, i, s, u {
font-style: normal;
text-decoration: none;
}

span {
white-space: nowrap;
}


/* position ///////////////////////*/
.pa {
position: absolute;
}

.pr {
position: relative;
}

.pf {
position: fixed;
}

.ps {
position: static;
}

.pt {
position: sticky;
}


/* border ///////////////////////*/
.bs {
border: 1px #0000FF solid;
}


/* box-sizing ///////////////////////*/
div, ul, ol, li, dl, dd, dt, a, p, table, tr, th, td, header, article, main, section, img, textarea, input, h1, h2, h3, h4, h5, h6 {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

/* toggle ///////////////////////*/
.toggle dt {
cursor: pointer;
}

.toggle dd {
display: none;
}


/* body ///////////////////////*/
html, body {
-webkit-text-size-adjust: 100%;
font-size: 16px;
background: #FFF;
}
@media (min-width: 740px) {
html, body {
font-size: 18px;
}
}


/* body ///////////////////////*/
body, div, td, th, ul, ol, li, dl, dt, dd, p, h1, h2, h3, h4, h5, h6, address, a, p, sup, em, s.i, small, span {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
font-weight: normal;
font-style: normal;
font-size: 1rem;
line-height: 1rem;
color: #0D1624;
padding: 0;
margin: 0;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}


/* footer 下部処理 ///////////////////////*/
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
min-height: 100vh;
}

.main {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}


/* sr-only スクリーンリーダーonly ///////////////////////*/
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}


/* a ///////////////////////*/
a, a p, a span {
color: #0D1624;
text-decoration: none;
}


/* scrollbar ///////////////////////*/
/*
::-webkit-scrollbar{
overflow:hidden;
width:9px;
}
::-webkit-scrollbar-thumb{
overflow:hidden;
background:@g2;
border:3px #FFF solid;
}
*/

@media (max-width: 740px) {
::-webkit-scrollbar {
display: none;
}
}


/* article ///////////////////////*/
article {
padding: 0 0 2rem 0;
}


/* section contents ///////////////////////*/
section {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 740px;
padding: 1rem 1rem 3rem 1rem;
}

@media (min-width: 740px) {
section {
padding: 2rem 0;
}
}

.section {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 740px;
padding: 0;
}

.contents{
position: relative;
margin: 0 auto;
width: 100%;
max-width: 740px;
padding: 0 1rem;
}


/* title 文字サイズ ///////////////////////*/
h1, h1 p, h1 span {
text-align: center;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
font-size: 1.3rem;
line-height: 2rem;
letter-spacing: 0.05rem;
}

h2, h2 p, h2 span {
text-align: center;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
font-size: 1.6rem;
line-height: 2.3rem;
letter-spacing: 0.05rem;
}

h3, h3 p, h3 span {
text-align: center;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
font-size: 1.3rem;
line-height: 2rem;
letter-spacing: 0.05rem;
}

h4, h4 p, h4 span {
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
font-size: 1.15rem;
line-height: 1.8rem;
}

h5, h5 p, h5 span {
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
font-size: 1.05rem;
line-height: 1.3rem;
}

.text_title em {
display: block;
text-align: center;
white-space: nowrap;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
font-size: 1.15rem;
line-height: 1.15rem;
padding: 0 0 10px 0;
}


/* モーダル見出し h2 ///////////////////////*/
.text_title h2 {
padding: 3rem 0;
}


/* 大見出し 背景 h3 ///////////////////////*/
.text_title h3 {
padding: 2rem 0;
background: #F9F1E7;
width: 100%;
overflow: hidden;
}


/* 中見出し 中央 h4 ///////////////////////*/
.text_title h4 {
text-align: center;
padding: 4rem 0 1rem 0;
}

.text_title small {
/* 登録数・お連れ様 */
text-align: center;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
font-size: 0.85rem;
line-height: 1.3rem;
}


/* 小見出し 太字 h5 ///////////////////////*/
.text_title h5 {
padding: 2rem 0 1rem 0;
}


/* カテゴリータイトル　category_title h2 ///////////////////////*/
.category_title {
padding: 6rem 0 3rem 0;
max-width: 470px;
margin: 0 auto;
}

.category_title small {
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
font-size: 1rem;
padding: 0.75rem 0 0 0;
letter-spacing: 0;
text-align: center;
}

.category_title .text_title {
padding: 2rem 0 0 0;
}

@media (min-width: 740px) {
.category_title {
padding: 5rem 0 3rem 0;
}
}


/* text ///////////////////////*/
.text {
display: block;
line-height: 1.6rem;
}

@media (min-width: 740px) {
.text {
line-height: 2rem;
}
}


/* memo フォーム補足説明 メモ ///////////////////////*/
.memo {
display: block;
text-align: left;
padding: 1rem 0 0 0;
font-size: 0.9rem;
line-height: 1.45rem;
}

.memo li, .memo p, .memo span {
font-size: 0.9rem;
line-height: 1.45rem;
}


/* small フォーム補足説明 メモ ///////////////////////*/
small {
display: block;
text-align: left;
padding: 0.5rem 0 0 0;
font-size: 0.75rem;
line-height: 1.15rem;
font-size: 0.8rem;
line-height: 1.45rem;
}
small li, small p, small span, small div, small td {
font-size: 0.8rem;
line-height: 1.45rem;
}
small img {
/* プレビューアイコン */
height: 1rem;
}

.alert small {
text-align: center;
}


/* 必須マーク ///////////////////////*/
.text_title p s, .text_title p i {
display: inline-block;
font-size: 0.8rem;
line-height: 1rem;
margin: 0 0 0 3px;
position: relative;
top: -10px;
padding: 4px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
color: #FFF;
}

.text_title p s {
background: #BF6565;
}

.text_title p i {
background: #4C7A98;
}


/* price ///////////////////////*/
.price {
color: #BB7F7F;
font-size: 1.3rem;
line-height: 1.3rem;
font-family: "Roboto", sans-serif;
font-weight: 700;
font-style: normal;
}

.price small {
display: inline-block;
font-family: "Roboto", sans-serif;
font-weight: 700;
font-style: normal;
color: #BB7F7F;
font-size: 60% !important;
}

.price .arrow {
width: 1.3rem;
height: 1.3rem;
margin: 0 0.5rem;
background: url("../image/icon/arrow.svg") no-repeat 50% 50%;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}

.price .arrow:before {
content: "";
display: block;
width: 100%;
height: 100%;
background: #BB7F7F;
-webkit-mask-image: url("../image/icon/arrow.svg");
-webkit-mask-size: cover;
mask-image: url("../image/icon/arrow.svg");
mask-size: cover;
}


/* alert ポップアップ（保存完了 入力エラー 削除完了） ///////////////////////*/
.alert {
-webkit-transition: 0.3s;
transition: 0.3s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
z-index: 9999;
width: 100%;
height: 100%;
padding: 15px;
background: rgba(255, 255, 255, 0.95);
}

.alert .wrap {
text-align: center;
width: 100%;
padding: 15px;
margin: 0 auto;
background: #F9F1E7;
max-width: 400px;
}

.alert .text {
padding: 15px 0 30px 0;
}

.alert .text em {
display: block;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
font-size: 1.1rem;
line-height: 1.6rem;
padding: 0 0 10px 0;
}

.alert .text p {
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
font-size: 0.9rem;
line-height: 1.45rem;
vertical-align: middle;
}

.alert .text em span {
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
line-height: 1.45rem;
}

.alert .text p span {
font-size: 0.9rem;
line-height: 1.45rem;
vertical-align: middle;
}

.alert .text p img {
width: 20px;
display: inline-block;
vertical-align: middle;
}


/* modal ウィンドウ ///////////////////////*/
.modal {
-webkit-transition: 0.3s;
transition: 0.3s;
position: fixed;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
z-index: 9999;
width: 100vw;
height: 100vh;
background: rgba(255, 255, 255, 0.95);
overflow: auto;
}


/* false 停止 ///////////////////////*/
.false {
-webkit-filter: grayscale(100);
filter: grayscale(100);
pointer-events: none;
opacity: 0.25;
}


/* hidden 非表示（loading） ///////////////////////*/
.hidden {
opacity: 0 !important;
}


/* visible 表示（保存完了 入力エラー 削除完了 サポート表示 モーダル表示） ///////////////////////*/
.visible {
opacity: 1 !important;
pointer-events: auto !important;
}

.visible iframe {
display: block !important;
}


/* header hide ///////////////////////*/
/* スクロールダウン　非表示 */
.header_hide {
top: -100px !important;
}

/* モーダル中　非表示 */
.header_off {
top: -100px !important;
}


/* header ///////////////////////*/
.header {
position: fixed;
top: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
width: 100%;
z-index: 10;
pointer-events: none;
}

.header .logo {
padding: 0.75rem;
width: 28vw;
max-width: 200px;
min-width: 120px;
pointer-events: auto;
}

.header .logo img {
width: 100%;
height:auto;
}

.header button {
display: block;
width: 100%;
}
@media (min-width: 740px) {
.header {
width: 98%;
}

.header .logo {
padding: 1rem;
}
}


/* header navi ///////////////////////*/
.header .navi {
position: absolute;
top: 0;
right: 0;
z-index: 110;
pointer-events: auto;
}

.header .navi ul {
display: table;
}

.header .navi li {
display: table-cell;
vertical-align: top;
}


/* header login ///////////////////////*/
.header .login {
padding: 0 0.75rem 0 0;
}

.header .login a, .header .login button {
display: block;
background: #262224;
border-radius: 0 0 0.5rem 0.5rem;
-moz-border-radius: 0 0 0.5rem 0.5rem;
-webkit-border-radius: 0 0 0.5rem 0.5rem;
}

.header .login p {
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
color: #FFF;
font-size: 0.9rem;
line-height: 0.9rem;
padding: 0.6rem;
}

.header .login a:hover, .header .login button:hover {
background: #007CFD;
}

@media (min-width: 740px) {
.header .login p {
font-size: 1rem;
padding: 0.75rem;
}
}


/* header cart ///////////////////////*/
.header .cart {
display: none;
padding: 0 5px 0 0;
}

.header .cart a, .header .cart button {
display: block;
width: 32px;
height: 32px;
padding: 2px;
}

@media (min-width: 740px) {
.header .cart {
padding: 0 10px 0 0;
}

.header .cart a, .header .cart button {
width: 42px;
height: 42px;
}
}


/* header toggle ///////////////////////*/
.header .toggle {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 2.5rem;
height: 2.5rem;
padding: 0 1rem 0 0;
cursor: pointer;
}

.header .toggle p {
position: relative;
display: block;
width: 100%;
}


/* header toggle span ///////////////////////*/
.header .toggle span {
position: absolute;
display: block;
width: 100%;
height: 2px;
border-radius: 4px;
background: #262224;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}

.header .toggle:hover span {
background: #007CFD;
}

.header .toggle span:nth-of-type(1) {
top: -4px;
}

.header .toggle span:nth-of-type(2) {
top: 4px;
}

.header .open span:nth-of-type(1) {
-webkit-transform: translateY(4px) rotate(-45deg);
transform: translateY(4px) rotate(-45deg);
}

.header .open span:nth-of-type(2) {
-webkit-transform: translateY(-4px) rotate(45deg);
transform: translateY(-4px) rotate(45deg);
}


/* menu_visible ///////////////////////*/
.menu_visible {
left: 0 !important;
}

@media (min-width: 740px) {
.header .menu {
width: 40%  !important;
border-left: 2px #262224 solid;
}

.header .menu .contents {
width: 80% !important;
}

.menu_visible {
left: 60% !important;
}
}


/* header menu ///////////////////////*/
.header .menu {
position: fixed;
top: 0;
left: 100%;
width: 100%;
height: 100vh;
z-index: 100;
background: rgba(255, 255, 255, 0.9);
background: #FFF;
pointer-events: auto;
-webkit-transition: 0.5s;
transition: 0.5s;
}

.header .menu .wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100vh;
}

.header .menu .contents {
width: 90%;
}

.header .menu .home {
padding: 0 0 1rem 0;
}

.header .menu .home ul {
display: table;
width: 100%;
}

.header .menu .home li {
display: table-cell;
vertical-align: middle;
text-align: right;
}

.header .menu .home img {
width: 3rem;
}

.header .menu .home li:first-child {
text-align: left;
}

.header .menu .home li:last-child {
width: 4rem;
padding: 0 0 0 1rem;
}

.header .menu .button ul {
display: block;
width: 100%;
}

.header .menu .button li {
display: block;
padding: 0 0 0.5rem 0;
}

.header .menu .button li a, .header .menu .button li button {
display: block;
width: 100%;
background: #262224;
border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
-webkit-border-radius: 0.5rem;
}

.header .menu .button a p, .header .menu .button button p {
text-align: center;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
font-weight: normal;
text-stroke-width: 0;
text-stroke-color: #222;
-webkit-text-stroke-width: 0;
-webkit-text-stroke-color: #222;
color: #FFF;
padding: 1rem;
font-size: 1.05rem;
}

.header .menu .button a:hover, .header .menu .button button:hover {
background: #007CFD;
}


/* flow ///////////////////////*/
.flow {
padding: 0 0 2rem 0;
}

.flow ul {
display: table;
width: 100%;
max-width: 740px;
margin: 0 auto;
}

.flow li {
position: relative;
display: table-cell;
width: 25%;
text-align: center;
}

.flow li p {
font-size: 0.8em;
line-height: 1.3em;
padding: 1rem 0 0 0;
white-space: nowrap;
}

.flow li i {
display: block;
margin: 0 auto;
width: 10px;
height: 10px;
margin-top: -5px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: #191618;
}

.flow .this i {
background: #BF6565;
}

.flow:before {
content: "";
display: block;
width: 100%;
margin-top: 5px;
border-bottom: 1px #191618 solid;
}


/* back ボタン ///////////////////////*/
.back {
position: fixed;
display: block;
top: 80px;
left: 10px;
z-index: 11;
-webkit-transition: 0.3s;
transition: 0.3s;
z-index: 9999;
}

.back a, .back button {
display: block;
width: 2rem;
height: 2rem;
background: #262224;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.back a:before, .back button:before {
content: "";
display: block;
width: 0.6rem;
height: 0.6rem;
margin: 0 0 0 3px;
border-top: 2px #FFF solid;
border-left: 2px #FFF solid;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.back a:hover, .back button:hover {
background: #007CFD;
}
@media (min-width: 740px) {
.back {
top: 130px;
}
}


/* 非表示 スクロールダウン  */
.back_hide {
left: -100px !important;
}


/* 非表示 top.html モーダル中 ヘルプ中 スクロール無視して強制 */
.back_off {
left: -100px !important;
}


/* close ×ボタン（modal シーティングなど） ///////////////////////*/
.close {
position: fixed;
display: block;
top: 10px;
right: 10px;
z-index: 10;
-webkit-transition: 0.3s;
transition: 0.3s;
}

.close a, .close button {
display: block;
width: 36px;
height: 36px;
background: #262224;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.close a:before, .close button:before {
content: "";
width: 70%;
aspect-ratio: 1;
background: url(../image/icon/close.svg);
-webkit-filter: invert();
filter: invert();
}

.close a:hover, .close button:hover {
background: #007CFD;
}


/* colmun ul ///////////////////////*/
.col {
/* カラム */
}

.col dl, .col ul,
.col .dl, .col .ul{
display: table;
width: 100%;
}

.col dd, .col li,
.col .dl .dd, .col .li {
display: table-cell;
vertical-align: middle;
}

.col1 {
/* カラム1 */
}

.col1 dl, .col1 ul,
.col1 .dl, .col1 .ul {
width: 100%;
}

.col1 dd, .col1 li,
.col1 .dd, .col1 .li {
display: block;
width: 100%;
}


/* カラム2 */
.col2 > dl, .col2 > ul,
.col2 .dl, .col2 .ul {
width: 100%;
}

.col2 > dl dd, .col2 > ul li, 
.col2 .dd, .col2 .li {
display: inline-block;
width: 50% !important;
vertical-align: top;
}

.col2 > dl dd:nth-child(odd), .col2 > ul li:nth-child(odd),
.col2 .dd:nth-child(odd), .col2 .li:nth-child(odd){
padding: 0 0.5rem 0 0;
}

.col2 > dl dd:nth-child(even), .col2 > ul li:nth-child(even),
.col2 .dd:nth-child(even), .col2 .li:nth-child(even){
padding: 0 0 0 0.5rem;
}


/* カラム2-2 */
.col2-2 > dl, .col2-2 > ul,
.col2-2 .dl, .col2-2 .ul {
width: 100%;
}

.col2-2 > dl dd, .col2-2 > ul li,
.col2-2 .dd, .col2-2 .li {
display: inline-block;
vertical-align: top;
}

.col2-2 > dl dd:nth-child(odd), .col2-2 > ul li:nth-child(odd),
.col2-2 .dd:nth-child(odd), .col2-2 .li:nth-child(odd){
padding: 0 0.5rem 0 0;
width: 40%;
}

.col2-2 > dl dd:nth-child(even), .col2-2 > ul li:nth-child(even),
.col2-2 .dd:nth-child(even), .col2-2 .li:nth-child(even){
padding: 0 0 0 0.5rem;
width: 60%;
}


.col3 {
/* カラム3 */
}

.col3 dl, .col3 ul,
.col3 .dl, .col3 .ul {
width: 100%;
}

.col3 dl dd, .col3 ul li,
.col3 .dd, .col3 .li{
vertical-align: top;
display: inline-block;
width: 33.3%;
}


@media(max-width:470px){

.col2-2 > dl dd:nth-child(odd), .col2-2 > ul li:nth-child(odd),
.col2-2 .dd:nth-child(odd), .col2-2 .li:nth-child(odd){
padding: 0 0 0.5rem 0;
width: 100%;
}

.col2-2 > dl dd:nth-child(even), .col2-2 > ul li:nth-child(even),
.col2-2 .dd:nth-child(even), .col2-2 .li:nth-child(even){
padding: 0 0 0.5rem 0;
width: 100%;
}

}
}


/* table フォーム用 ///////////////////////*/
.table1 table {
width: 100%;
}

.table1 td {
text-align: left;
vertical-align: top;
padding: 0.3rem 0;
border-bottom: 1px #E6E6E6 solid;
}

.table1 th {
padding: 1rem 0.3rem 0.3rem 0;
border-bottom: 1px #E6E6E6 solid;
text-align: left;
vertical-align: top;
}

.table1 tr:last-child td, .table1 tr:last-child th {
border-bottom: 0;
}

.table1 th:first-child {
width: 1%;
white-space: nowrap;
}

.table1 em {
/* thに入れない項目名  */
display: block;
padding: 0.75rem 0;
}

.table1 td small {
display: block;
padding: 0.3rem 0 !important;
}
@media (min-width: 740px) {
.table1 td, .table1 th {
padding: 0.5rem 0;
}

.table1 th {
padding: 1.15rem 0.5rem 0.5rem 0;
}
}


/* table 表示用  確認画面 ///////////////////////*/
.table2 table, .check table {
width: 100%;
padding: 0.75rem;
border: 2px #ABA9AA solid;
overflow: hidden;
}

.table2 th, .check th, .table2 td, .check td {
text-align: left;
padding: 0.75rem;
font-size: 0.9rem;
line-height: 1.45rem;
border-bottom: 1px #E6E6E6 solid;
}

.table2 tr:last-child td, .check tr:last-child td, .table2 tr:last-child th, .check tr:last-child th {
border-bottom: 0;
}

.table2 th, .check th {
text-align: center;
background: #FAF4F2;
}


/* breadcrumb パンくず ///////////////////////*/
.breadcrumb {
padding: 0 0 1rem 0.5rem;
/*
li:last-child span{
.oh;
text-overflow:ellipsis;
width:10px;
min-width:200px;
flex-grow:1;
}
*/
}

.breadcrumb li {
display: inline-block;
padding: 0 0 0 0.5rem;
}

.breadcrumb a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
}

.breadcrumb span {
white-space: nowrap;
display: inline-block;
vertical-align: middle;
font-size: 0.8rem;
line-height: 0.8rem;
padding: 0;
}

.breadcrumb span:before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
vertical-align: middle;
border-top: 2px #262224 solid;
border-right: 2px #262224 solid;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: 0 0.5rem 0 0;
}



/* link  > リンクボタン ///////////////////////*/
.link {
/* padding:1rem 0 0 0; */
display: inline-block;
text-align: left;
}

.link li {
padding: 0.1rem 0;
}

.link a {
display: block;
padding: 0.3rem 0;
}

.link a p {
position: relative;
text-decoration: underline;
padding: 0 0 0 1.15rem;
}

.link p:before {
content: "";
position: absolute;
display: block;
left: 0.1rem;
top: 0.3rem;
width: 0.5rem;
height: 0.5rem;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
border-right: 2px #0D1624 solid;
border-bottom: 2px #0D1624 solid;
}

.link a:hover p {
color: #007CFD;
}

.link a:hover p:before {
border-right: 2px #007CFD solid;
border-bottom: 2px #007CFD solid;
}


/* submit button ボタン ///////////////////////*/
.submit {
padding: 3rem 0 0 0;
}

.button a, .submit a, .button button, .submit button {
display: block;
text-decoration: none;
text-align: center;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
margin: 0 auto;
width: 100%;
cursor: pointer;
background: #262224;
padding: 1rem 0;
border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
-webkit-border-radius: 0.5rem;
}

.button p, .submit p, .button span, .submit span {
white-space: nowrap;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
color: #FFF;
font-size: 1.3rem;
line-height: 1.6rem;
}

.button li, .submit li {
padding-bottom: 0.5rem;
}

.button a:hover, .submit a:hover, .button button:hover, .submit button:hover {
background: #007CFD;
}


/* page-top ボタン /////////////////////// */
.page-top {
position: fixed;
bottom: -3rem;
right: 0.5rem;
z-index: 9999;
}

.page-top a, .page-top button {
display: block;
width: 2rem;
height: 2rem;
background: #262224;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.page-top a:before, .page-top button:before {
content: "";
display: block;
width: 0.6rem;
height: 0.6rem;
margin: 0.2rem 0 0 0;
border-top: 2px #FFF solid;
border-left: 2px #FFF solid;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.page-top a:hover, .page-top button:hover {
background: #007CFD;
}


/* footer ///////////////////////*/
.footer {
background: #F9F1E7;
padding: 75px 0;
}

.footer .copy {
text-align: center;
font-size: 0.6rem;
}


/* .swiper ///////////////////////*/
.swiper {
position: relative;
overflow: hidden;
}

.swiper-wrapper {
position: relative;
}


/* next prev ///////////////////////*/
.next, .prev {
position: absolute;
z-index: 10;
top: 50%;
margin-top: -18px;
text-align: center;
display: block;
width: 36px;
height: 36px;
cursor: pointer;
background: #FFF;
}

.next {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
right: 0;
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
}

.prev {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
left: 0;
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
}

.next:before, .prev:before {
content: "";
display: block;
margin: 0 auto;
width: 12px;
height: 12px;
border-top: 2px #0D1624 solid;
border-right: 2px #0D1624 solid;
}

.next:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.prev:before {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}

.next:hover, .prev:hover {
background: #007CFD;
}

.next:hover::before, .prev:hover::before {
border-top: 2px #FFF solid;
border-right: 2px #FFF solid;
}
@media (min-width: 740px) {
.next, .prev {
width: 47px;
height: 47px;
}

.next:before, .prev:before {
width: 15px;
height: 15px;
}
}