@charset "utf-8";
/*----------------------------------------
全体
----------------------------------------*/
html{
font-family:'游ゴシック体', 'Yu Gothic', YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
font-size:62.5%;
color: #000;
-webkit-text-size-adjust:100%;
line-height:1.5;
font-weight: 500;
}
body{ font-size:1.4rem; font-size: 1.4em; }
img{ vertical-align: bottom; }
img {
image-rendering: -webkit-optimize-contrast;
}
a{
color:#000;
transition: all 0.4s;
}
a:hover{
color:#0458c3;
transition: all 0.4s;
}
a img:hover{
opacity: 0.7;
}
.blue{background: #083B6D}
.skyblue{background: #7ECEF4}
.gray{background: #e6e7e7}
.dark_gray{background-color: #434343}
.beige{background: #E5DDCB}
.text_bold{
font-weight: bold;
}
.max_respon{max-width: 100%;}
/*----------------------------------------
text
----------------------------------------*/
p{ line-height: 2; }
.palt{
font-feature-settings: "palt";
}
.text_bold{ font-weight: bold; }
.text_gray{ color: #a6a6a6; }
.text_red{ color: #e60012; }
.text_pink{ color: #ea68a2; }
.lh_14{ line-height: 1.4 !important; }
.lh_15{ line-height: 1.5 !important; }
.lh_16{ line-height: 1.6 !important; }
.lh_18{ line-height: 1.8 !important; }
.ls_-1{ letter-spacing: -1px; }
.ls_03{letter-spacing: 0.3rem; }
@media print, screen and (min-width: 770px){
.text_12{ font-size:1.2rem !important; }
.text_13{ font-size:1.3rem !important; }
.text_14{ font-size:1.4rem !important; }
.text_16{ font-size:1.6rem !important; }
.text_18{ font-size:1.8rem !important; }
.text_20{ font-size:2rem !important; }
.text_21{ font-size:2.1rem !important; }
.text_22{ font-size:2.2rem !important; }
.text_24{ font-size:2.4rem !important; }
.text_26{ font-size:2.6rem !important; }
.text_28{ font-size:2.8rem !important; }
.text_36{ font-size:3.6rem !important; }
}/*END*/
@media screen and (max-width: 599px){
.text_12{ font-size:1.2rem !important; }
.text_13{ font-size:1.3rem !important; }
.text_14{ font-size: 1.3rem !important; }
.text_16{ font-size: 1.4rem !important; }
.text_18{ font-size: 1.6rem !important; }
.text_20{ font-size: 1.7rem !important; }
.text_21{ font-size: 1.8rem !important; }
.text_22{ font-size: 1.8rem !important; }
.text_24{ font-size: 1.8rem !important; }
.text_26{ font-size: 1.9rem !important; }
.text_28{ font-size: 2rem !important; }
.text_36{ font-size: 2.2rem !important; }
}/*END*/
.clear{ clear: both; }
li{ list-style:none; }
.center{ text-align:center; }
.text_left{ text-align:left; }
.text_right{ text-align:right; }
.op:hover{
filter: alpha(opacity=70);
-moz-opacity:070;
opacity:0.70;
transition: all 0.4s;
}
.op{
transition: all 0.4s;
}
/*----------------------------------------
layout
----------------------------------------*/
#container{
overflow: hidden;
}
.main_frame{
width: 100%;
position: relative;
box-sizing: border-box;
max-width: 750px;
margin-left: auto;
margin-right: auto;
}
.overflow{
overflow: hidden;
}
.lp_frame{
width:84%;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
}
.lp_frame_f{
width:90%;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
}
#bk{
background-color: #fff;
position: relative;
}
#bk:before{
content: "";
position: fixed;
width: 100%;
height: 100%;
/* background-image: url("../images/background.jpg");
background-size: contain; */
z-index: 1;
/*background-color : #2d5605;*/
background-color: #eae4cc;
/* background-image:
repeating-linear-gradient( 0deg,#e4e4e4 0px 1px, transparent 1px 10px),
repeating-linear-gradient( 90deg,#e4e4e4 0px 1px, transparent 1px 10px); */
}
.ribbon_l{
position: fixed;
top: 0;
left: 0;
background: url(../images/background-rbn.jpg) center top repeat-y;
background-size: 100%;
height: 100vh;
width: 4.5%;
max-width: 50px;
box-shadow: 0 0 8px 0px rgb(0 0 0 / 20%);
z-index: 1;
}
.ribbon_r{
position: fixed;
top: 0;
right: 0;
background: url(../images/background-rbn.jpg) center top repeat-y;
background-size: 100%;
height: 100vh;
width: 4.5%;
max-width: 50px;
box-shadow: 0 0 8px 0px rgb(0 0 0 / 20%);
z-index: 1;
}
#frame{
position: relative;
z-index: 2;
background: #fff;
box-shadow: 0 0 30px 0px rgb(0 0 0 / 30%);
}
@media screen and (min-width: 750px){
.lp_frame{
width: 84%;
margin-right: auto;
margin-left: auto;
}
.check .lp_frame{
width: 90%;
margin-right: auto;
margin-left: auto;
}
#frame{
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
}/*END*/
@media screen and (max-width: 751px){
.ribbon_l{
display: none;
}
.ribbon_r{
display: none;
}
}/*END*/
@media print, screen and (min-width: 770px){
.sp_only{
display: none !important;
}
.btn_hover{
position: relative;
display: block;
}
.btn_hover:hover{
animation:btn_hover 0.5s ease-in;
}
@keyframes btn_hover{
0% {
top: 0;
}
40% {
top: -5px;
}
100% {
top: 0;
}
}
}/*END*/
@media print, screen and (min-width: 600px){
.sp_br{
display: none;
}
}/*END*/
@media screen and (max-width: 769px){
.pc_only{
display: none !important;
}
}/*END*/
/*----------------------------------------
画像を中央配置
----------------------------------------*/
.photo_frame{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
aspect-ratio: 200 / 240;
}
.photo_frame img{
width: 100%;
height: 100% !important;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
object-fit: cover;
}
.photo_frame img:not(:target){
left: 0\9;
top: 0\9;
}
.photo_frame img{
left: 0\9;
top: 0\9;
}
@media all and (-ms-high-contrast: none) {
.photo_frame img{
left: 50%\9 !important;
top: 50%\9 !important;
}
}
.photo_frame{ z-index: 1; }/*chrome*/
.photo_frame img {
object-fit: contain;
height: auto !important;
}
/*----------------------------------------
youtube_frame
----------------------------------------*/
.youtube_frame{
position: relative;
overflow: hidden;
width: 85%;
margin-left: auto;
margin-right: auto;
height: auto;
aspect-ratio: 686 / 386;
text-align: center;
}
.youtube_frame iframe{
width: 100%;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.youtube_frame iframe:not(:target){
left: 0\9;
top: 0\9;
}
.youtube_frame iframe{
left: 0\9;
top: 0\9;
}
/*----------------------------------------
map
----------------------------------------*/
.map {
position: absolute;
overflow: hidden;
width: 83%;
height: 21%;
top: 60%;
left: 50%;
transform: translateX(-50%);
}
.map iframe{
width: 100%;
height: 100%;
border: none;
display: block;
object-fit: contain;
}/*END*/
/*----------------------------------------
footer
----------------------------------------*/
footer {
background-color: #d5dddf;
}
.foot_tel {
position: absolute;
width: 85%;
transform: translate(-50%, 0);
left: 50%;
top: 26%;
}
.foot_hp {
position: absolute;
width: 80%;
transform: translate(-50%, 0);
left: 50%;
top: 55%;
}
.sns_area {
position: absolute;
width: 85%;
transform: translate(-50%, 0);
left: 50%;
top: 72%;
display: flex;
justify-content: center;
text-align: center;
gap: 10%;
}
.sns_area img{
width: 70%;
}
.sp_menu{
width: 100%;
display: none;
position: fixed;
bottom: 0;
left: 0;
box-sizing: border-box;
z-index: 1;
}
.sp_menu a{
display: block;
}
.sp_menu ul{
display: flex;
width: 100%;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 768px){
.sp_menu ul{
max-width: 768px;
}
}/*END*/
/*----------------------------------------
header
----------------------------------------*/
header{
position: fixed;
top: 0;
left: 0;
z-index: 50;
width: 100%;
}
.drawer{
position: fixed;
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
width: 100vw;
height: 100vh;
color: #d0c077;
display: flex;
justify-content: center;
visibility: hidden;
opacity: 0;
transform: translateX(100%);
transition: 0.5s ease-in-out;
z-index: 50;
}
.drawer ul{
text-align: center;
padding-top: 100px;
}
.drawer ul li{
position: relative;
transform: translateX(-150px);
transition: transform 0.5s ease;
}
.drawer ul li:nth-child(2){ transition-delay: 0.15s; }
.drawer ul li:nth-child(3){ transition-delay: 0.25s; }
.drawer ul li:nth-child(4){ transition-delay: 0.35s; }
.drawer ul li:nth-child(5){ transition-delay: 0.45s; }
.drawer ul li:nth-child(6){ transition-delay: 0.55s; }
.drawer ul li:nth-child(7){ transition-delay: 0.65s; }
.drawer ul li:nth-child(8){ transition-delay: 0.4s; }
.drawer ul li:nth-child(9){ transition-delay: 0.45s; }
.drawer ul li:nth-child(10){ transition-delay: 0.5s; }
.drawer ul li:nth-child(11){ transition-delay: 0.55s; }
.drawer ul li:nth-child(12){ transition-delay: 0.6s; }
.drawer ul li a{
display: inline-block;
font-size: 2rem;
color: #fff;
text-decoration: none;
padding: 15px;
}
.drawer ul li a:hover{
animation: drawer 1.4s;
color: #C1C1C1;
}
@keyframes drawer{
0%{
filter: none;
}
30%{
filter: blur(0.8px);
}
100%{
filter: none;
}
}
.open .drawer{
visibility: visible;
opacity: 1;
transform: translateX(0);
}
.open .drawer ul li{
transform: translateX(0);
}
@media screen and (max-width: 768px){
.drawer ul li a{
font-size: 1.8rem;
}
}/*END*/
.head_sns {
width: min(100px,20vw);
height: min(12.5vw,62.5px);
position: fixed;
right: calc(50% - 250px + min(12.5vw,62.5px) + min(4.8vw,24px));
top: 0;
z-index: 51;
display: flex;
align-items: center;
justify-content: space-between;
}
.head_instagram {
width: 34.375%;
max-width: 34.375px;
}
.head_youtube {
width: 46.875%;
max-width: 46.875px;
}
.btn_menu_works {
position: fixed;
width: 30px;
height: 11px;
right: calc(50% - 228px);
top: 38px;
cursor: pointer;
transition: all 0.5s;
z-index: 99;
}
.btn_menu_works span {
position: absolute;
left: 0;
width: 100%;
height: 3px;
background: #fff;
transition: all 0.4s;
}
.btn_menu_works span:nth-child(1){
top: 0;
}
.btn_menu_works span:nth-child(2){
bottom: 0;
}
.open .btn_menu_works span{
background: #fff!important;
}
.open .btn_menu_works span:nth-child(1){
transform: rotate(45deg);
top: 10px;
}
.open .btn_menu_works span:nth-child(2){
transform: rotate(-45deg);
top: 10px;
}
@media screen and (max-width: 749px){
.btn_menu_works{
right: 4%;
top: 32px;
}
}/*END*/
@media screen and (max-width: 649px){
.btn_menu_works {
top: 50px;
}
}/*END*/
@media screen and (max-width: 549px){
.btn_menu_works {
top: 41px;
width: 6%;
}
}/*END*/
@media screen and (max-width: 469px){
.btn_menu_works {
top: 32px;
}
}/*END*/
@media screen and (max-width: 375px){
.btn_menu_works {
top: 25px;
}
}/*END*/
/*----------------------------------------
content
----------------------------------------*/
.rela{
position: relative;
}
img.respon {
display: block;
}
.bg_red {
background-color: #ac4334;
}
.btn01 {
position: absolute;
width: 73%;
transform: translate(-50%, 0);
left: 50%;
bottom: 7%;
}
.btn02 {
position: absolute;
width: 73%;
transform: translate(-50%, 0);
left: 50%;
top: 26%;
}
.btn03 {
position: absolute;
width: 73%;
transform: translate(-50%, 0);
left: 50%;
bottom: 9.5%;
}
.btn04 {
position: absolute;
width: 73%;
transform: translate(-50%, 0);
left: 50%;
bottom: 3.5%;
}
.btn05 {
position: absolute;
width: 73%;
transform: translate(-50%, 0);
left: 50%;
bottom: 6%;
}
/*----------------------------------------
btn
----------------------------------------*/
.btn_frame{
position: relative;
}
.btn_frame a{
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 5%;
width: calc((670/800)*100%);
}
.btn_01{
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 2%;
width: calc((750/800)*100%);
}
/*----------------------------------------
form
----------------------------------------*/
.form_frame {
background: #eaeaea;
width: 100%;
box-sizing: border-box;
padding-left: 5%;
padding-right: 5%;
}
.form_frame p{
line-height: 2;
font-size: 1.6rem;
}
.hissu:after, .nini:after {
display: inline-block;
padding: 4px 4px;
line-height: 1;
margin-left: 5px;
border-radius: 5px;
vertical-align: 2px;
font-size: 1.6rem;
font-weight: bold;
}
.hissu:after {
content: "必須";
display: inline-block;
background: #b4a38e;
color: #fff;
border: 1px solid #b4a38e;
}
.nini:after {
content: "任意";
display: inline-block;
background-color: #98ccd9;
border: 1px solid #98ccd9;
color: #fff;
}
@media screen and (max-width: 769px){
.privacy .hissu:after,
th.hissu:after,
th.nini:after{
padding: 3px 6px;
font-size: 1.2rem;
vertical-align: 1px;
margin-left: 6px;
}
}
.contact{
width: 100%;
line-height: 2;
}
.contact th,
.contact td{
text-align: left;
box-sizing: border-box;
font-weight: normal;
font-size: 1.8rem;
}
.privacy_check {
font-size: 1.5rem;
letter-spacing: -1px;
line-height: 1.2;
font-weight: bold;
}
.privacy_check label{
width: 100%;
display: block;
background: #fff;
border: 1px solid #000;
box-sizing: border-box;
margin-left: 0;
padding-left: 54px;
margin-top: 10px;
}
.contact th{
font-weight: bold;
}
.contact td{
padding: 5px 0 25px 0;
}
.date_td input{
margin-bottom: 10px;
}
.date_td select{
width: 100%;
}
.form_submit a{
display: block;
width: calc((616/800)*100%);
margin-left: auto;
margin-right: auto;
}
/*error*/
td .error{
color: #e60012;
padding-top: 10px;
}
.privacy .error {
display: inline-block;
margin-top: 10px;
color: #e60012;
font-size: 1.8rem;
padding: 5px 14px;
background: #ffa2ad;
line-height: 2;
font-weight: normal;
}
td.error{
background:#ffa2ad;
padding: 8px;
display: block;
margin-bottom: 15px;
}
.date_td .clearfix{
overflow: hidden;
}
.date_error{
clear: both;
margin-top: 40px !important;
}
.comolete_tel{
font-size: 2rem !important;
font-weight: bold;
}
/*フォーム基本設定*/
select,
textarea,
input[type="text"],
input[type="number"],
input[type="url"],
input[type="email"],
input[type="tel"]{
border: none;
padding: 16px 15px;
box-sizing: border-box;
font-family:'游ゴシック体', 'Yu Gothic', YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
-webkit-appearance: none;
transition: all 0.4s;
border: 1px solid #000000;
background: #fff;
/* line-height: 1; */
font-size: 1.6rem;
}
select{
width: 100%;
}
textarea{
line-height: 1.4;
}
input[type="button"]{
font-family: "Noto Sans JP";
-webkit-appearance: none;
background: #ebebeb;
}
button,
input[type="submit"]{
-webkit-appearance: none;
transition: all 0.4s;
}
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus{
outline: none;
border: 1px solid #3c3b38;
}
.form1{ width: 150px; }
.form2{ width: 250px; }
.form3{ width: 350px; }
.form4{ width: 500px; }
.form_all{
width: 100%;
}
/*----------------------------------------
checkbox radiobtn
----------------------------------------*/
.radio input[type="radio"],
.check input[type="checkbox"]{
position: absolute;
height: 1px;
width: 1px;
clip: rect(0, 0, 0, 0);
}
.radio label,
.check label{
display: inline-block;
position: relative;
cursor: pointer;
padding-left: 54px;
line-height: 3;
}
.radio label:before,
.check label:before{
position: absolute;
content: "";
top: 50%;
left: 20px;
width: 22px;
height: 22px;
margin-top: -11px;
border-radius: 50%;
border: 1px solid #aeaeae;
background: #fff;
}
.check label:before{ border-radius: 0; }
.radio label,
.check label{
margin-left: 0\9;
padding: 11px\9;
}
.radio label:not(:target),
.check label:not(:target){
margin-left: 10px\9;
padding: 11px 0 11px 25px\9;
}
.radio label:before,
.check label:before{
display: none\9;
}
.radio label:not(:target):before,
.check label:not(:target):before{
display: inline-block\9;
}
.radio input[type="radio"]:checked + label:after{
position: absolute;
content: "";
box-sizing: border-box;
top: 50%;
left: -4px;
width: 12px;
height: 12px;
margin-top: -5px;
border-radius: 50%;
background: #3c3b38;
}
.check input[type="checkbox"]:checked + label:after{
content: "";
position: absolute;
top: 50%;
box-sizing: border-box;
display: block;
left: 23px;
width: 18px;
height: 10px;
margin-top: -6px;
border-left: 4px solid #3c3b38;
border-bottom: 4px solid #3c3b38;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.radio input[type="radio"]:focus + label:before,
.check input[type="checkbox"]:focus + label:before{
box-shadow: 0 0 3px 0 #3c3b38;
}
/*kind*/
.kind label {
width: 100%;
display: block;
background: #fff;
border: 1px solid #000;
box-sizing: border-box;
margin-left: 0;
padding-left: 54px;
margin-bottom: 10px;
}
.kind label:before{
left: 20px;
}
.check.kind input[type="checkbox"]:checked + label:after{
left: 23px;
}
/*----------------------------------------
カレント表示ナビゲーション
----------------------------------------*/
.target_nav {
display: none;
position: fixed;
z-index: 100;
top: 50%;
right: 50%;
transform: translate(calc(-50% + 300px),-50%);
z-index: 49;
}
.header__link {
display: block;
width: 6px;
height: 32px;
background-color: transparent;
border: 1px solid #000;
margin-top: 20px;
}
.header__link.is-active {
background-color: #000;
}
li.header__item {
position: relative;
}
/*横の文字調整*/
.t_nav_tex{
display: block;
width: 28px;
text-align: center;
position: absolute;
top: 50%;
color: #000;
transform: translate(15%, -50%);
}
@media screen and (max-width: 768px){
.target_nav {
right: 5%;
transform: translate(0,-50%);
}
.header__link {
width: 4px;
height: 24px;
margin-top: 15px;
border: 1px solid #c8c8c8;
}
.header__link.is-active {
background-color: #c8c8c8;
}
/*横の文字調整*/
.t_nav_tex{
color: #c8c8c8;
width: 20px;
}
}/*END*/
/*----------------------------------------
datepicker
----------------------------------------*/
#ui-datepicker-div{
max-width: 100%;
width: 350px;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button, html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active{
padding: 15px;
}
.ui-datepicker .ui-datepicker-header{
padding: 8px 0;
}