/*
Theme Name: Tattoo Onsen
Author: Tattoo-Friendly Onsen Association
description: Enjoy the onsen, tattoos and all. We hope your visit to Japan will be even more memorable through the joy of experiencing a Japanese onsen.
Version: 1.0.0
Text Domain: Tattoo Onsen
*/


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Outfit:wght@100..900&display=swap');


body {margin:0 auto; padding:0;}
section {font-family:"Outfit",sans-serif; width:100%; margin:0; padding:0;}

.ovh {overflow:hidden; margin:0; padding:0;}

/* fv */
.fv {position:relative; width:100%; height:70vh; margin:0; padding:0;}

.fv-n {position:relative; width:100%; height:auto; margin:0; padding:0;}

.obj-l {position:absolute; z-index:4; top:3%; right:4%; width:31%;}
.obj-m {position:absolute; z-index:1; bottom:3%; left:3%; width:27%;}
.obj-l img,
.obj-m img {max-width:100%; height:auto;}
.obj-l-t {position:absolute; z-index:4; top:3%; right:4%; width:31%;}
.obj-m-t {position:absolute; z-index:1; bottom:3%; left:10%; width:24%;}
.obj-l-t img,
.obj-m-t img {max-width:100%; height:auto;}
.obj-l-t img:hover {opacity:0.9;}


/* header */
/* gnav */
.gnavsp {position:absolute; width:100%; margin:0; padding:0;}
.gnav__nav {position:absolute; z-index:3; right:0; left:0; top:0; width:100%; height:100vh; transform:translateX(100%); background:#dc373c; transition:ease .3s;}
#nav-items {position:absolute; top:60%; left:50%; transform:translate(-50%, -50%); padding:0; list-style:none;}
#nav-items li a {font-family:"Outfit",sans-serif; color:#fff; width:100%; display:block; text-align:center; font-size:16px; font-weight:600; margin:0; padding:0 0 24px 0; text-decoration:none;}
.gnav__menu {width:60px; height:100%; padding:20px 0 0 14px;}
.menu_bar {background-color:transparent; border-color:transparent; z-index:10;}
.menu_bar span {position:relative; z-index:3; display:block; width:100%; height:2px; background-color:#fff; transition:ease .4s; box-shadow:0px 1px 1px 0px rgba(0, 0, 0, 0.9);}
.menu_bar span:nth-child(1) {top:0;}
.menu_bar span:nth-child(2) {margin:8px 0;}
.menu_bar span:nth-child(3) {top:0;}
.gnav__nav.active {transform: translateX(0);}
.menu_bar.active span:nth-child(1) {top:5px; transform:rotate(45deg);}
.menu_bar.active span:nth-child(2) {opacity:0;}
.menu_bar.active span:nth-child(3) {top:-15px; transform:rotate(-45deg);}
/* page */
.hd-p-w {position:absolute; top:0; left:0; width:100%; height:210px; margin:0; padding:0;}
.page-inn {position:relative; width:100%; margin:0; padding:230px 0 40px 0;}


/* mv */
.mv-w {margin:0; padding:0;}
.slider-1 {overflow:hidden; position:absolute; z-index:-1; top:0; left:50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); width:100%; height:100%; margin:0; padding:0;}
.slider-1 img {object-fit:cover; width:100%; height:100vh; max-width:100%; max-height:100%; margin:auto;}


/* btn */
.btn_w {display:flex; justify-content:flex-end; width:100%; margin:0; padding:0;}
.btn_btn {width:30%; margin:50px 0 0 0; padding:0;}
.btn_btn img {max-width:100%; height:auto;}
.btn_btn a:hover {opacity:0.7;}


/* section */
.sc-b {width:92%; margin:0 auto; padding:40px 0 40px 0;}
.sc-b-n {width:92%; margin:0 auto; padding:0;}
.bc-e1 {background:#e19195;}
.bc-ff {background:#FFC8EA;}
.bc-d2 {background:#D2CD89;}
.bc-c1 {background:#c1272d;}
.bc-fb {background:#fb8c38;}
.txt-w {width:100%; margin:0; padding:30px 0 0 0;}
.txt-b,
.txt-r {color:#111111; line-height:1.4; word-break:keep-all; overflow-wrap:normal; white-space:normal;}
.txt-rw {color:#fff; line-height:1.4; word-break:keep-all; overflow-wrap:normal; white-space:normal;}
.txt-b {position:relative; z-index:2; font-size:21px;}
.txt-r {font-size:18px;}
.txt-rw {font-size:18px;}
.t-title::before {content:""; display:inline-block; background-image:url('images/top/ico-t-f.svg'); background-size:cover; background-repeat:no-repeat; width:1em; height:1em;}
.t-title::after {content:""; display:inline-block; background-image:url('images/top/ico-t-l.svg'); background-size:cover; background-repeat:no-repeat; width:1em; height:1em;}
.sc-om {position:relative; width:92%; margin:0 auto; padding:0 0 40px 0;}
.obj_om {position:absolute; top:2%; right:0; width:60%; margin:0; padding:0;}
.obj_om img {max-width:100%; height:auto;}
.sec-tit-w {position:relative; display:flex; justify-content:center; align-items:center; width:90%; margin:0 auto; padding:40px 0 0 0;}
.sec-tit-w-n {position:relative; display:flex; justify-content:center; align-items:center; width:90%; margin:0 auto; padding:0;}
.sec-tit-ico {box-sizing:border-box; width:43%; margin:0; padding:0 30px 0 0;}
.sec-tit-log {position:relative; z-index:2; width:57%; margin:0; padding:0;}
.sec-tit-or {width:80%; margin:0; padding:0;}
.sec-tit-ico img,
.sec-tit-log img,
.sec-tit-or img {max-width:100%; height:auto;}
.contact-us {overflow:hidden; width:100%; height:270px; margin:0; padding:0;}
.contact-us img {object-fit:cover; max-width:100%; height:auto;}
.txt-w-t {width:100%; margin:70px 0 0 0; padding:0;}
.txt-b-t,
.txt-r-t {color:#111111; line-height:1.4; word-break:keep-all; overflow-wrap:normal; white-space:normal;}
.txt-b-t {font-size:21px;}
.txt-r-t {font-size:18px;}
.rb {font-weight:700;}
.rr {font-weight:300;}
.not-found {width:100%; margin:0; padding:180px 0; font-family:"Outfit",sans-serif; color:#111111; font-size:16px; font-weight:400; text-align:center;}


/* section Just for you */
.jfy-w {width:100%;}
.slider-2 {overflow:hidden; position:relative; top:0; left:50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); width:100%; height:100%; margin:0; padding:0;}
.slider-2 img {object-fit:cover; width:100%; height:auto; max-width:100%; max-height:100%; margin:auto;}


/* team up with us */
.formw {width:100%; margin:24px 0 0 0; padding:0; list-style:none;}
.formw li {font-family:"Outfit",sans-serif; color:#111111; font-size:16px; font-weight:400; padding:7px 0;}
.ft-ind {padding-left:1em; text-indent:-1em;}
.formw textarea {display:block; box-sizing:border-box; width:96%; margin:0; padding:7px; color:#111111; font-size:16px; font-weight:400; border-radius:2px; border:solid 2px #b6282c;}
.formw textarea:focus {border:solid 2px #b6282c; background:#fedddd; outline:0;}
/* radio */
.f-rb {overflow:auto; margin:0; padding:0; list-style:none;}
.f-rb li {position:relative; display:block; float:left; overflow:hidden; width:100%; margin:0; padding:0;}
.f-rb li input[type=radio] {position:absolute; visibility:hidden;}
.f-rb li label {position:relative; display:block; z-index:9; height:40px; margin:0 auto; padding:3px 20px 3px 40px; font-family:"Outfit",sans-serif; color:#111111; font-size:16px; font-weight:300; line-height:1.4; cursor:pointer; -webkit-transition:all 0.25s linear;}
.f-rb li:hover label {color:#b6282c;}
.f-rb li .check {position:absolute; display:block; z-index:5; top:0; left:10px; width:20px; height:20px; border:2px solid #b6282c; border-radius:100%; transition:border .25s linear; -webkit-transition:border .25s linear;}
.f-rb li:hover .check {border:2px solid #b6282c;}
.f-rb li .check::before {position:absolute; display:block; content:''; top:5px; left:5px; width:10px; height:10px; margin:auto; border-radius:100%; transition:background 0.25s linear; -webkit-transition:background 0.25s linear;}
input[type=radio]:checked ~ .check {border:2px solid #b6282c;}
input[type=radio]:checked ~ .check::before {background:#b6282c;}
input[type=radio]:checked ~ label {color:#b6282c;}
/* checkbox */
.f-cb input[type="checkbox"] {position:relative; width:20px; height:20px; border:2px solid #b6282c; border-radius:2px; vertical-align:-5px; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
.f-cb input[type="checkbox"]:checked:before {position:absolute; content:''; top:1px; left:5px; width:4px; height:8px; transform:rotate(50deg); border-right:2px solid #b6282c; border-bottom:2px solid #b6282c;}
.f-cb label {margin:0; padding:0; font-family:"Outfit",sans-serif; color:#111111; font-size:16px; font-weight:300; line-height:1.4;}
/* selectbox */
.selectbox-1 {position:relative;}
.selectbox-1::before,
.selectbox-1::after {position:absolute; content:''; pointer-events:none;}
.selectbox-1::before {display:inline-block; right:0; width:2.4em; height:2.4em; border-radius:0 2px 2px 0; background:#b6282c;}
.selectbox-1::after {position:absolute; top:50%; right:1.3em; transform:translate(50%, -50%) rotate(45deg); width:6px; height:6px; border-bottom:2px solid #fff; border-right:2px solid #fff;}
.selectbox-1 select {appearance:none; box-sizing:border-box; width:90%; height:2.4em; padding:.4em 3.6em .4em .8em; border:none; border-radius:3px; background:#fff; color:#333; font-size:16px; font-weight:300; cursor:pointer;}
.selectbox-1 select:focus {outline:none;}
.use-ph-w {display:flex; justify-content:center; align-items:center; width:90%; margin:0 auto; padding:0; list-style:none;}
.use-ph-w li {width:38%; margin:0; padding:0;}
.use-ph-w li.arrow {box-sizing:border-box; width:14%; margin:0; padding:0 10px;}
.use-ph-w li img,
.use-ph-w li.arrow img {max-width:100%; height:auto;}
.use-txt {width:90%; margin:30px auto; font-family:"Outfit",sans-serif; color:#111111; font-size:16px; font-weight:300; line-height:1.4;}
/* up load */
.up-load {display:block; width:40%; margin:30px auto; padding:10px; font-family:"Outfit",sans-serif; font-size:16px; font-weight:400; color:#b6282c; border:1px solid #b6282c; background:#ededed; border-radius:2px; text-align:center; line-height:1em;}
/* submit */
.btn-sb {display:block; width:50%; margin:30px auto; padding:10px; font-size:16px; font-weight:400; text-align:center; border-radius:2px; cursor:pointer; color:#fff; line-height:1em; transition:.3s; background:#b6282c;}
.btn-sb:hover {box-shadow:none; color:#b6282c; background:#fff;}
.btn-sb a {color:#fff; text-decoration:none;}
/* input */
.formw input {box-sizing:border-box; width:100%; padding:10px; border:2px solid #b6282c; border-radius:2px; font-family:"Outfit",sans-serif; color:#111111; font-size:16px; font-weight:300;}
.formw input:focus {border:solid 2px #b6282c; background:#fedddd; outline:0;}

/* thanks */
.thanks {width:63%; margin:0 auto; padding:70px 0 50px;}
.thanks img {max-width:100%; height:auto;}
.thanks-w {width:100%; margin:0; padding:0; font-family:"Outfit",sans-serif; margin:0; padding:0; color:#111111; font-size:16px; font-weight:300;}
.follow {display:block; width:80%; margin:50px auto 0; padding:0;}
.obj-f {width:100%; margin:30px 0 0 0;}
.obj-i {width:40px; margin:10px auto 0;}
.obj-f img,
.obj-i img {max-width:100%; height:auto;}
.f-txt {font-family:"Outfit",sans-serif; margin:0; padding:0; color:#111111; font-size:14px; font-weight:400;}
.f-txt-s {font-family:"Outfit",sans-serif; margin:0; padding:20px 0 0 0; color:#111111; font-size:12px; font-weight:300; text-align:center;}


/* Just for you */
.shindan-w {width:100%; margin:0; padding:20px 0 50px 0;}
.w-inner {width:90%; margin:0 auto; padding:100px 0 0 0;}
.w-inner-n {width:100%; margin:0; padding:0;}
.sd-st {width:33%; margin:30px auto; padding:0;}
.sd-st:hover,
.sd-st-st:hover {opacity:0.7; transform: scale(1.2);}
.inn-obj {width:81%; margin:35px auto 0; padding:0;}
.inn-obj img {max-width:100%; height:auto;}
.sd-cp {font-family:"Outfit",sans-serif; margin:0; color:#fff; font-size:14px; font-weight:300; text-align:center; line-height:1.4;}
.inn-lg {display:flex; justify-content:flex-end; width:100%; margin:10px 0 0 0; padding:0; list-style:none;}
.inn-lg li {box-sizing:border-box; width:18%; margin:0; padding:0 7px 0 0;}
.inn-lg li img {max-width:100%; height:auto;}
.que-w {position:relative; width:100%; margin:0; padding:0;}
.que-q {width:60%; margin:14px auto 0; padding:0; line-height:0;}
.que-q img {max-width:100%; height:auto;}
.qtxt {position:absolute; top:24%; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); width:94%; margin:0; padding:0; font-family:"Outfit",sans-serif; color:#111111; font-size:21px; font-weight:600; text-align:center; line-height:1.4;}
.la-pr {position:absolute; bottom:2%; left:3%; width:90%; margin:24px auto 0; padding:0; font-family:"Outfit",sans-serif; color:#fff; font-size:16px; font-weight:300;}
.la-pr a {color:#fff; text-decoration:none;}
.la-pr a:hover {opacity:0.7;}
.rs-ph {width:100%; margin:0; padding:0;}
.rs-ph img {max-width:100%; height:auto;}
.rs-tt,
.rs-tx {width:94%; margin:0 auto; font-family:"Outfit",sans-serif; color:#111111; line-height:1.4; text-align:left;}
.rs-tt {padding:15px 0 0 0; font-size:18px; font-weight:600;}
.rs-tx {padding:7px 0 0 0; font-size:14px; font-weight:400;}
.modal_box {position:fixed; z-index:7777; display:none; box-sizing:border-box; width:100%; height:90vh; margin:0; padding:0; background:#f1723c;}
.modal_close {display:block; position:absolute; top:2%; left:3%; width:60px; height:60px;}
.modal_close:before,
.modal_close:after {content:""; position:absolute; top:50%; left:50%; width:2px; height:60px; background:#fff;}
.modal_close:before {transform:translate(-50%,-50%) rotate(60deg);}
.modal_close:after {transform:translate(-50%,-50%) rotate(-60deg);}
.modal_bg {position:fixed; top:0; left:0; z-index:6666; display:none; width:100%; height:120%; background-color:rgba(0,0,0,0.7);}
.link_area {display:block; width:100%; margin:0; padding:0; list-style:none;}
.la-li {display:flex; justify-content:flex-start; align-items:center; width:100%; height:60px; margin:0 0 1px 0; padding:0; background:#fff;}
.la-li:hover {transform:scale(1.02); background:#c1272d; transition: all 1s ease;}
.la-li a:hover {color:#fff; text-decoration:none;}
.li-no {box-sizing:border-box; width:10%; margin:0; padding:3px 10px 0;}
.li-no img {max-width:100%; height:auto;}
.li-select {margin:0; padding:0; font-family:"Outfit",sans-serif; color:#c1272d; font-size:16px; font-weight:600; line-height:1.4;}


/* About us member */
.mm_w {width:100%; margin:70px 0 0 0; padding:0;}
.mm_w_inn {width:84%; margin:0 auto 50px; padding:0 0 50px 0; border-bottom:1px solid #fff;}
.mm_pr {width:80%; margin:0 auto 20px; padding:0;}
.mm_pr img {max-width:100%; height:auto;}
.pr_tit,
.pr_txt {font-family:"Outfit",sans-serif; line-height:1.4; font-weight:400;}
.pr_tit {margin:10px 0 0 0; padding:0; font-size:14px; color:#fff;}
.pr_txt {margin:0; padding:0; font-size:16px; color:#111111; text-align:justify;}


/* contact */
.cnt-w {width:90%; box-sizing:border-box; margin:0 auto; padding:0 24px; background:#fff; border-radius:4px;}
.item-li,
.wpcf7-form input[type="text"],
.wpcf7-form textarea,
.wpcf7-form input[type="submit"],
.required,
.f-item-lead,
.f-item-det,
.wpcf7-form .wpcf7-not-valid-tip,
.wpcf7-form .wpcf7-mail-sent-ok {font-family:"Outfit",sans-serif;}
.item-li {position:relative; display:block; width:100%; margin:0 0 40px 0; padding:0; color:#c1272d; font-size:14px; font-weight:400;}
.sub-li {width:100%; margin:0 auto; padding:0; text-align:center;}
.required::after {position:absolute; top:0; right:0; content:"Required"; display:inline-block; vertical-align:middle; background:#c1272d; min-width:10px; margin:0; padding:3px 7px; color:#fff; font-size:12px; font-weight:300; line-height:1; text-align:center; white-space:nowrap; border-radius:4px;}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"] {width:100%; box-sizing:border-box; margin:14px 0 0px 0; padding:10px; color:#333; border-bottom:1px solid #c1272d; border-top:none; border-left:none; border-right:none; font-size:14px; font-weight:300; background:#f5e8e8;}
.wpcf7-form textarea {width:100%; box-sizing:border-box; margin:14px 0 0 0; padding:10px; border:1px solid #c1272d; border-radius:2px; font-size:14px; font-weight:300; background:#f5e8e8;}
.wpcf7-form textarea:focus,
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus {background:#f4cecf; outline:0;}
.f-item-lead {margin:0; padding:20px 0; color:#111; font-size:14px; font-weight:300; line-height:1.4; text-align:justify;}
.f-item-det {color:#111; font-size:13px; font-weight:300; line-height:1.4; text-align:justify;}
.wpcf7-form input[type="submit"] {appearance:none; -webkit-appearance:none; -moz-appearance:none; box-sizing:border-box; display:inline-block; width:140px; margin:0 auto 40px; padding:10px; color:#fff; font-size:12px; font-weight:400; text-align:center; cursor:pointer; border:none; border-radius:2px; background:#c1272d;}
.wpcf7-form span.wpcf7-spinner {display:none;}
.wpcf7-form .wpcf7-not-valid-tip {margin:7px 0 0 0; padding:0; color:#730c10; font-size:14px; font-weight:300;}
.wpcf7-form .wpcf7-mail-sent-ok {
color: green;
font-size: 16px;
margin-bottom: 20px;
}


/* footer */
.footer {width:100%; margin:50px 0 0 0; padding:0 0 20px 0;}
.copyright {font-family:"Outfit",sans-serif; margin:0; padding:0; color:#111111; font-size:13px; font-weight:300; text-align:center;}


.grecaptcha-badge { visibility: hidden; }