html{-webkit-text-size-adjust:100%;box-sizing:border-box;-moz-tab-size:4;tab-size:4;word-break:normal}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{margin:0;padding:0}hr{color:inherit;height:0;overflow:visible}details,main{display:block}summary{display:list-item}small{font-size:80%}[hidden]{display:none}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}a{background-color:transparent}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}pre{font-size:1em}b,strong{font-weight:bolder}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:inherit;text-indent:0}iframe{border-style:none}input{border-radius:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}button,select{text-transform:none}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,input,select,textarea{background-color:transparent;border-style:none}a:focus,button:focus,input:focus,select:focus,textarea:focus{outline-width:0}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;color:inherit;font:inherit}[disabled]{cursor:default}img{border-style:none}progress{vertical-align:baseline}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true]{cursor:default}
/* Slider */
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
padding-bottom:5px;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
background: #fff;
}
/* Icons */
/* Arrows */
.slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: .25;
}
.slick-prev:before,
.slick-next:before
{
font-size: 20px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
left: -25px;
}
[dir='rtl'] .slick-prev
{
right: -25px;
left: auto;
}
.slick-prev:before
{
content: '←';
}
[dir='rtl'] .slick-prev:before
{
content: '→';
}
.slick-next
{
right: -25px;
}
[dir='rtl'] .slick-next
{
right: auto;
left: -25px;
}
.slick-next:before
{
content: '→';
}
[dir='rtl'] .slick-next:before
{
content: '←';
}
/* Dots */
.slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: static;
display: block;
width: 100%;
padding: 0;
margin:10px 0 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-size: 70px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: 0.5;
color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: 1;
color:#e71425;
}
/* CSS Document */
/*
Theme Name:アリス公式サイト
Theme URI: https://www.chatlady-alice.com/
Description: This is our original theme.
Author:
Author URI:
Version:1.0
*/
/* =========================
base
========================= */
:root {
--color-main: #333333;
--color-key: #e71425;
--color-bg: #ffffff;
--font: "Kiwi Maru", serif;
--space-xs: clamp(8px, 2.5vw, 10px);
--space-sm: clamp(12px, 5vw, 20px);
--space-md: clamp(20px, 7.5vw, 30px);
--space-l: clamp(24px, 10vw, 40px);
--space-xl: clamp(32px, 12.5vw, 50px);
--space-2xl: clamp(40px, 15vw, 60px);
--space-3xl: clamp(48px, 17.5vw, 70px);
--space-4xl: clamp(56px, 20vw, 80px);
--transition: .5s ease;
}
/*------------------------------------------------------------------
Universal Selector
------------------------------------------------------------------*/
* {
font-style: normal;
margin: 0;
padding: 0;
text-align: left;
box-sizing: border-box;
}
html,
body {
scroll-behavior: smooth;
}
[id] {
scroll-margin-top: 60px;
}
body {
font-family: "Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
color: var(--color-main);
font-size:16px;
line-height: 1.5;
font-weight: 400;
background:
url("../images/common/pc_bg.jpg")
center center / cover no-repeat fixed;
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: none;
}
ul {
list-style: none;
}
li {
list-style-type: none;
}
p{
line-height:1.8;
}
img{
height: auto;
max-width: 100% ;
vertical-align:bottom;
}
#topimage .slider1:not(.slick-initialized) > li:not(:first-child),
.slider2:not(.slick-initialized) > li:not(:first-child),
.slider3:not(.slick-initialized) > li:not(:first-child){
display: none;
}
#topimage .slider1:not(.slick-initialized),
.slider2:not(.slick-initialized),
.slider3:not(.slick-initialized){
overflow: hidden;
}
.ulstyle01.point01:not(.slick-initialized){
padding-top: 50px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
/* =========================
layout
========================= */
.layout {
position: relative;
}
.z-02{
position: relative;
z-index: 2;
}
.m5t{margin-top: 5px !important;}
.m5b { margin-bottom: 5px !important; }
.m10b { margin-bottom: 10px !important; }
.m15b { margin-bottom: 15px !important; }
.m20b { margin-bottom: 20px !important; }
.m30b { margin-bottom: 30px !important; }
.m40b { margin-bottom: 40px !important; }
.m50b { margin-bottom: 50px !important; }
.m60b { margin-bottom: 60px !important; }
.m70b { margin-bottom: 70px !important; }
.m80b { margin-bottom: 80px !important; }
.m90b { margin-bottom: 90px !important; }
.m100b { margin-bottom: 100px !important; }
.mb01{margin-bottom:var(--space-xs) }
.mb02{margin-bottom:var(--space-sm) }
.mb03{margin-bottom:var(--space-md) }
.mb04{margin-bottom:var(--space-l) }
.mb05{margin-bottom:var(--space-xl) }
.mb06{margin-bottom:var(--space-2xl) }
.mb07{margin-bottom:var(--space-4xl) }
.mb08{margin-bottom:clamp(40px, 24vw, 100px)}
.mb09{margin-bottom:clamp(50px, 35vw, 150px)}
.mr01{margin-right: 3px;}
.ml01{margin-left: 10px;}
.p-i01{padding-inline:clamp(10px, 4vw, 30px);}
.p-b01{padding-block:var(--space-sm);}
.p-b02{padding-block:var(--space-md);}
.p-b03{padding-block:var(--space-l)}
.pb01{
padding-bottom: var(--space-xl);
}
.bold { font-weight: bold !important; }
.txtRed { color: var(--color-key); }
.txtBlack { color: var(--color-main); }
.txtWhite { color: #FFFFFF !important; }
.txt10 { font-size: 77% !important; }
.txt11 { font-size: 92% !important; }
.txt13 { font-size: 109% !important; }
.txt14 { font-size: 117% !important; }
.txt15 { font-size: 125% !important; }
.txt17 { font-size: 142% !important; }
.txt18 { font-size: 150% !important; }
.txt20 { font-size: 167% !important; }
.f-min{
font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E", "メイリオ", Meiryo, serif;
}
.f-maru {
font-family:var(--font);
font-style: normal;
}
.clear { clear: both !important; }
.cen { text-align: center !important; }
.cen-pc{text-align:center !important;}
.left { text-align: left !important; }
.right { text-align: right !important; }
/* 投稿の画像配置 */
.f-left{float:left;}
.f-right{float:right;}
.bg01{
background: linear-gradient(to bottom, #fff1eb 0%,#ffcfca 100%);
}
.bg02{
background: var(--color-key);
}
.bg03{
background: #fff1eb;
}
.bg04{
position: relative;
padding-top: var(--space-l);
background:#ffeae1 url("../images/common/bg02-t.jpg") center top / 100% no-repeat;
}
.bg04::after{
content: "";
position: absolute;
left: 50%;
bottom: -60px;
transform: translateX(-50%);
width: 110%;
height: 210px;
background: #ffeae1;
border-radius: 50%;
z-index: 1;
}
.bg05{
background: #ffeae1;
}
.line01{
padding-bottom: 5px;
border-bottom:dotted 2px var(--color-key);
}
.span01{
position: relative;
display: inline-block;
border-right:dotted 2px #333;
}
.span01.last{
display: inline-block;
border-left:dotted 2px #333;
}
.span01.no{
border-right:none;
}
.span02{
text-shadow :
1px 1px 0px #ffffff,
-1px 1px 0px #ffffff,
1px -1px 0px #ffffff,
-1px -1px 0px #ffffff,
1px 0px 0px #ffffff,
0px 1px 0px #ffffff,
-1px 0px 0px #ffffff,
0px -1px 0px #ffffff;
}
.span03{
border-bottom:dotted 2px #333;
line-height: 2;
}
.span04{
border-bottom:dotted 2px var(--color-key);
line-height: 2;
}
.secstyle01{
position: relative;
}
.secstyle01::before{
content: " ";
width: 100%;
height: 50px;
display: block;
background: url("../images/common/bg01.png");
background-size:11px;
}
.secstyle02{
position: relative;
}
.secstyle02::before{
content: " ";
width: 100%;
height: 85px;
display: block;
position: absolute;
left: 0;
top:0;
background: url("../images/common/bg01.png");
background-size:11px;
}
.hstyle01{
text-align: center;
}
.hstyle01 .ttl1{
padding: 3px 10px;
display: inline-block;
border:solid 1px var(--color-key);
color: var(--color-key);
font-size:80%;
background: #fff;
border-radius: 20px;
}
.hstyle01 .ttl1 img{
height: 17px;
}
.hstyle02{
color: var(--color-key);
font-family:var(--font);
font-size:min(5.5vw,26px);
text-align: center;
}
.hstyle02.small{
font-size:min(4.8vw,22px);
}
.hstyle03{
padding-top: var(--space-xl);
color: var(--color-key);
font-family:var(--font);
font-size:min(5.8vw,26px);
text-align: center;
background: url("../images/common/hstyle03.png") no-repeat center top;
background-size:70px;
}
.hstyle03.small{
font-size:min(4.8vw,22px);
}
.hstyle04{
font-size:min(5vw,24px);
font-family:var(--font);
}
.hstyle05{
display: inline-block;
position: relative;
padding: 10px 15px;
color: var(--color-key);
font-family:var(--font);
font-size:min(4.8vw,24px);
text-align: center;
}
.hstyle05::before{
content: " ";
position: absolute;
left: 0px;
top:0;
background: url("../images/common/commnet01_b.png") left top / 100% no-repeat;
width: 20px;
height: 25px;
}
.hstyle05::after{
content: " ";
position: absolute;
right: 0px;
bottom:0;
background: url("../images/common/commnet01_a.png") right top / 100% no-repeat;
width: 20px;
height: 25px;
}
.ulstyle01 .hstyle05{
font-size:min(4.4vw,20px);
padding-inline: var(--space-sm);
}
.ulstyle01 .hstyle05{
padding-left: 10px;
padding-right: 0;
}
.ulstyle01 .hstyle05::before{
left:-10px;
}
.ulstyle01 .hstyle05::after{
right:-10px;
}
.hstyle06{
min-height: 35px;
padding-left: 40px;
font-family: var(--font);
font-size:110%;
}
.hstyle06.one{
background: url("../images/area/no1.png") left center / auto 35px no-repeat;
}
.hstyle06.two{
background: url("../images/area/no2.png") left center / auto 35px no-repeat;
}
.hstyle06.three{
background: url("../images/area/no3.png") left center / auto 35px no-repeat;
}
.hstyle06.four{
background: url("../images/area/no4.png") left center / auto 35px no-repeat;
}
.tatettl{
font-family: var(--font);
font-size:min(5.3vw,26px);
writing-mode: vertical-rl;
text-shadow :
1px 1px 0px #ffffff,
-1px 1px 0px #ffffff,
1px -1px 0px #ffffff,
-1px -1px 0px #ffffff,
1px 0px 0px #ffffff,
0px 1px 0px #ffffff,
-1px 0px 0px #ffffff,
0px -1px 0px #ffffff;
}
.slider-bg{
position: relative;
padding-inline:5%;
}
.slider-bg::before{
content: " ";
position: absolute;
top: calc(50% - 10px);
left: 0;
background:var(--color-key);
width: 100%;
height: 1px;
}
.slider-bg2{
padding: 5%;
background: #fff;
}
.slider-bg2 .slick-dotted.slick-slider{
margin-bottom: 0;
}
.ulstyle01 li.inner{
border:solid var(--color-key) 1px;
border-radius: 10px;
overflow: hidden;
background: #fff;
box-shadow: 0 4px 0 rgba(206,9,25,0.5);
}
.ulstyle01 li.inner{
margin-right: 1px;
}
/*タイトルが赤のデザイン*/
.ulstyle01 li .ttl.bgred{
padding-block:var(--space-xs);
background: var(--color-key);
font-family:var(--font);
font-size:min(4.8vw,24px);
}
.ulstyle01 li .text{
padding: var(--space-sm);
}
/*stepのデザイン*/
.ulstyle01.step li.inner{
padding: var(--space-sm);
}
.ulstyle01.step li.inner .step{
padding-inline:5px;
display: inline-block;
background: var(--color-key);
font-size:90%;
}
.ulstyle01.step li.inner .stepttl{
font-size:min(5vw,24px);
}
.ulstyle01.step li.inner p{
font-size:90%;
}
/*pointのデザイン*/
.ulstyle01.point01 .slick-track{
padding-top: 50px;
}
.ulstyle01.point01 li.inner{
position: relative;
overflow: inherit;
}
.ulstyle01.point01 li.inner .ttl{
padding-inline: var(--space-xs);
padding-block: var(--space-sm);
font-size:clamp(12px, 4.3vw, 20px);
}
.ulstyle01.point01 li.inner p{
font-size:90%;
}
.ulstyle01.point01 li.inner .noicon{
position: absolute;
top:-40px;
left: 50%;
transform: translateX(-50%);
width: 53px;
}
.ulstyle01.ttlwhite li.inner .ttl{
padding-block: var(--space-sm);
padding-inline: var(--space-xs);
}
.ulstyle01.ttlwhite li.inner p{
font-size:90%;
}
.ulstyle01 li .job{
margin-bottom: var(--space-xs);
padding: 2px 10px;
display: inline-block;
background: var(--color-key);
color:#fff;
font:var(--font);
font-size:90%;
border-radius: 20px;
}
.ulstyle02 li{
position: relative;
padding-top: var(--space-md);
}
.ulstyle02 li .ttl2{
width: 68%;
}
.ulstyle02 li:nth-of-type(even) .ttl2{
margin-left: 32%;
}
.ulstyle02 li .ttl1{
position: absolute;
top: var(--space-l);
right:5%;
width: 24%;
}
.ulstyle02 li .ttl1.vl1{
font-family: var(--font);
font-size:min(5.3vw,26px);
writing-mode: vertical-rl;
text-shadow :
1px 1px 0px #ffffff,
-1px 1px 0px #ffffff,
1px -1px 0px #ffffff,
-1px -1px 0px #ffffff,
1px 0px 0px #ffffff,
0px 1px 0px #ffffff,
-1px 0px 0px #ffffff,
0px -1px 0px #ffffff;
line-height: 2;
}
.ulstyle02 li:nth-of-type(even) .ttl1{
right:auto;
left: 3%;
}
.ulstyle02 li:first-of-type{
background: url("../images/common/boxstyle01_01.png") no-repeat right top;
background-size:80%;
}
.ulstyle02 li:nth-of-type(2){
background: url("../images/common/boxstyle01_02.png") no-repeat left top;
background-size:98%;
}
.ulstyle02 li:nth-of-type(3){
padding-top: var(--space-2xl);
background: url("../images/common/boxstyle01_03.png") no-repeat right top;
background-size:75%;
}
.ulstyle02 li:nth-of-type(3) .ttl1{
top: var(--space-3xl);
}
.ulstyle02 li:nth-of-type(4){
background: url("../images/common/boxstyle01_04.png") no-repeat left top;
background-size:85%;
}
.ulstyle02 li:nth-of-type(5){
background: url("../images/common/boxstyle01_05.png") no-repeat right top;
background-size:85%;
}
.ulstyle02 li .photo{
position: relative;
}
.ulstyle02 li .photo .no{
position: absolute;
top:-25px;
left: 10px;
font-size:min(9vw,40px);
color: #fff;
text-shadow :
1px 1px 0px var(--color-key),
-1px 1px 0px var(--color-key),
1px -1px 0px var(--color-key),
-1px -1px 0px var(--color-key),
1px 0px 0px var(--color-key),
0px 1px 0px var(--color-key),
-1px 0px 0px var(--color-key),
0px -1px 0px var(--color-key);
font-weight: bold;
font-family: var(--font);
}
.ulstyle02 li:nth-of-type(even) .photo .no{
left: auto;
right:10px;
}
/*縦書き文字が1列バージョン*/
.ulstyle02.ul02-v1 li .ttl2{
width: 83%
}
.ulstyle02.ul02-v1 li:nth-of-type(even) .ttl1{
right:auto;
left: 5%;
}
.ulstyle02.ul02-v1 li .ttl1{
top: var(--space-2xl);
right:5%;
width: 6.4%;
}
.ulstyle02.ul02-v1 li .ttl1.vl1{
font-size:min(6.4vw,36px);
line-height: 1.6;
}
.ulstyle02.ul02-v1 li:nth-of-type(even) .ttl2{
margin-left: 17%;
}
.ulstyle02.ul02-v1 li:nth-of-type(2) .ttl2{
width: 92%;
margin-left: 8%;
}
.ulstyle02.ul02-v1 li:nth-of-type(3) .ttl1{
top: var(--space-4xl);
}
.ulstyle02.ul02-v1 li:nth-of-type(5) .ttl2{
width: 95%;
}
/*縦書き文字が3列バージョン*/
.ulstyle02.ul02-v2 li .ttl2{
width: 58%;
}
.ulstyle02.ul02-v2 li .ttl1{
width:36%
}
.ulstyle02.ul02-v2 li:nth-of-type(even) .ttl2{
margin-left: 42%;
}
.ulstyle02.ul02-v2 li:nth-of-type(even) .ttl1{
top:10%;
}
.ulstyle02.ul02-v2 li:nth-of-type(2){
background-size:85%;
}
.ulstyle02.ul02-v2 li:nth-of-type(3){
padding-top: var(--space-sm);
}
.ulstyle02.ul02-v2 li:nth-of-type(3) .ttl1{
top: var(--space-sm);
}
/*----画像に番号付き---*/
.ulstyle02 .ttl2.no{
position: relative;
}
.ulstyle02 .ttl2.no figcaption{
position: absolute;
top:-25px;
left: 10px;
font-size:min(9vw,40px);
color: #fff;
text-shadow :
1px 1px 0px var(--color-key),
-1px 1px 0px var(--color-key),
1px -1px 0px var(--color-key),
-1px -1px 0px var(--color-key),
1px 0px 0px var(--color-key),
0px 1px 0px var(--color-key),
-1px 0px 0px var(--color-key),
0px -1px 0px var(--color-key);
font-weight: bold;
font-family: var(--font);
}
.ulstyle02 li:nth-of-type(even) .ttl2.no figcaption{
left: auto;
right:10px;
}
.ulstyle03 li{
padding-top: 20px;
padding-bottom: 40px;
position: relative;
}
.ulstyle03 li::before{
content: " ";
position: absolute;
left: 0;
top:0;
width: 97%;
height: 100%;
background: #fff;
border-radius: 0 0 80px 0;
box-shadow: 3px 3px 8px rgba(0,0,0,0.1);
z-index: 1;
}
.ulstyle03 li:nth-of-type(even)::before{
left: auto;
right:0;
border-radius: 0 0 0 80px;
}
.ulstyle03 li .boxstyle01,.ulstyle03 li p{
position: relative;
z-index: 2;
}
.ulstyle03 li .boxstyle01 .ttl1{
padding-inline:var(--space-xs);
font-size:clamp(12px, 4.6vw, 22px);
line-height: 2;
}
.ulstyle03 li p{
padding-top: var(--space-sm);
padding-left: var(--space-xs);
padding-right: var(--space-l);
}
.ulstyle03 li:nth-of-type(even) p{
padding-left: var(--space-l);
padding-right: var(--space-xs);
}
.ulstyle03 .box01.bg03{
padding:15px;
margin-left: var(--space-xs);
margin-right: var(--space-l);
}
.ulstyle03 .h3ttl{
font-size:clamp(14px,5vw, 26px);
}
.ulstyle03 li .point{
padding: 0 5px;
display: inline-block;
background: var(--color-key);
color: #fff;
line-height: 1.5;
font-size:90%;
}
.ulstyle04 li{
position: relative;
padding-top: var(--space-md);
background: url("../images/flow/flow_bg3.png") center top / 100% no-repeat;
}
.ulstyle04 li .photo{
position: relative;
width: 58%;
}
.ulstyle04 li .photo .no{
position: absolute;
top:-25px;
left: 10px;
font-size:min(9vw,40px);
color: #fff;
text-shadow :
1px 1px 0px var(--color-key),
-1px 1px 0px var(--color-key),
1px -1px 0px var(--color-key),
-1px -1px 0px var(--color-key),
1px 0px 0px var(--color-key),
0px 1px 0px var(--color-key),
-1px 0px 0px var(--color-key),
0px -1px 0px var(--color-key);
font-weight: bold;
font-family: var(--font);
}
.ulstyle04 li .ttl1{
position: absolute;
top: var(--space-l);
right:3%;
width: 36%;
font-family: var(--font);
font-size:min(5.3vw,30px);
writing-mode: vertical-rl;
text-shadow :
1px 1px 0px #ffffff,
-1px 1px 0px #ffffff,
1px -1px 0px #ffffff,
-1px -1px 0px #ffffff,
1px 0px 0px #ffffff,
0px 1px 0px #ffffff,
-1px 0px 0px #ffffff,
0px -1px 0px #ffffff;
line-height: 2;
}
.ulstyle04 li:nth-of-type(even) .photo{
margin-left: 42%;
}
.ulstyle04 li:nth-of-type(even) .photo .no{
left: auto;
right:10px;
}
.ulstyle04 li:nth-of-type(even) .ttl1{
right:auto;
left: 3%;
}
.ulstyle04 li:nth-of-type(odd) .ttl1.double{
padding-right:7%;
}
.ulstyle04 li:nth-of-type(even) .ttl1.double{
width:30%;
}
.ulstyle05 li{
list-style-type: disc;
margin-left: 1em;
}
.ulstyle06{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.ulstyle06 li{
margin-bottom: 10px;
width: 48%;
height:11.5vw;
padding-block:clamp(5px, 2vw, 15px);
border:solid 1px var(--color-key);
background: #fff;
color: var(--color-key);
border-radius: 5px;
text-align: center;
font-size:min(4vw,18px);
}
.ulstyle06 li.open{
padding-top: min(1vw, 5px);
line-height: 1.4;
}
.ulstyle06 li.open div.txtBlack{
font-size:min(3vw,16px);
}
.ulstyle06.row1 li{
width: 100%;
}
.ulstyle07 li .inner{
padding-bottom: var(--space-l);
width: 87%;
background: #fff;
box-shadow: 3px 3px 8px rgba(0,0,0,0.1);
}
.ulstyle07 li:nth-of-type(odd) .inner{
border-radius: 0 0 80px 0;
}
.ulstyle07 li:nth-of-type(even) .inner{
margin-left: 13%;
border-radius: 0 0 0 80px;
}
.ulstyle07 li p{
font-size:90%;
}
.olstyle01 li{
list-style-type: decimal;
margin-left: 20px;
}
.checklist li{
padding-left: 20px;
background: url("../images/common/check.png") left top 2px/15px no-repeat;
font-size:90%;
}
.slide-arrow {
cursor: pointer;
margin: auto;
position: absolute;
top: calc(50% - 25px);
width: 30px;
z-index: 3;
}
.prev-arrow {
left:-3vw;
}
.next-arrow {
right: -3vw;
}
.slider-w .slick-dots li button:before{
color: #ccc;
}
/*赤の丸背景のデザイン*/
.red-inner{
position: relative;
padding-top: 30px;
padding-bottom: 20px;
background: url("../images/common/red_bg01.png") center top / auto 100% no-repeat;
}
.red-inner .slick-dots li.slick-active button:before{
color: #fff;
}
.boxstyle01{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.boxstyle01.rev{
flex-direction: row-reverse;
}
.boxstyle01.center{
align-items: center;
}
.boxstyle02{
display: flex;
}
.boxstyle02.rev{
flex-direction: row-reverse;
}
.boxstyle02 .ttl1{
padding: 0 3%;
width: 13%;
}
.boxstyle02 .box{
padding-bottom: var(--space-l);
width: 87%;
background: #fff;
border-radius:0 0 0 80px;
box-shadow: 3px 3px 8px rgba(0,0,0,0.1);
}
.boxstyle02.rev .box{
border-radius: 0 0 80px 0;
}
.boxstyle02 .box .ttl2{
padding-block: var(--space-xs);
}
.boxstyle02 .box .text1{
font-size:90%;
}
.boxstyle03{
padding: var(--space-sm);
}
.boxstyle03 dl{
display: flex;
flex-wrap: wrap;
}
.boxstyle03 dl dt{
width: 30%;
}
.boxstyle03 dl dd{
width: 70%;
}
.wid01{
width:48%;
}
.wid02{
width:50%;
}
.wid03{
width:36%;
}
.wid04{
width:60%;
}
.table01{
border:solid var(--color-key) 1px;
border-bottom:none;
border-radius: 10px;
overflow: hidden;
border-collapse: separate;
box-shadow: 0 4px 0 rgba(206,9,25,0.5);
}
.table01 tr{
overflow:hidden;
}
.table01 th{
padding: var(--space-xs);
width: 25%;
border-right:solid var(--color-key) 1px;
border-bottom:solid var(--color-key) 1px;
color: var(--color-key);
font-weight: normal;
}
.table01 tr:first-of-type th{
border-radius: 10px 0 0 0;
overflow: hidden;
}
.table01 tr:first-of-type td{
border-radius: 0 10px 0 0;
overflow: hidden;
}
.table01 tr:last-of-type th{
border-radius: 0 0 0 10px;
overflow: hidden;
}
.table01 tr:last-of-type td{
border-radius: 0 0 10px 0;
overflow: hidden;
}
.table01 td{
padding: var(--space-xs);
width: 75%;
border-bottom:solid var(--color-key) 1px;
}
.table01 ol li{
list-style-type: decimal;
margin-left: 20px;
margin-bottom: 5px;
line-height: 1.3;
}
.table01 ol li:last-of-type{
margin-bottom: 0;
}
.link01 a{
padding: var(--space-xs);
display: inline-block;
background: #dc3644;
color: #fff;
font-family: var(--font);
border-radius: 20px;
box-shadow: 0px 0px 8px rgba(103,92,93,0.5);
}
.link02 a{
padding: 15px 40px 15px 15px;
background: #dc3644 url("../images/common/link02.png") right 10px center / 20px no-repeat;
font-size: min(4.1vw, 20px);
}
.link01.double{
line-height: 1.3;
}
.photo01{
padding: var(--space-xs);
display: grid;
gap:2vw;
grid-template-columns: repeat(3, 1fr);
}
.photo01 img:nth-of-type(2){
margin-top: 20px;
}
.photo01.up img:nth-of-type(2){
margin-top:0;
}
.photo01.up img:nth-of-type(1),.photo01.up img:nth-of-type(3){
margin-top:20px;
}
.shop-list{
display: flex;
justify-content:space-between;
flex-wrap: wrap;
}
.shop-list li{
width: 48%;
}
.shop-list li a{
display: block;
height: 50px;
padding: 10px;
margin-bottom: var(--space-xs);
border:solid 1px var(--color-key);
background: #fff url("../images/common/list01.png") right 10px center / 20px no-repeat;
border-radius: 5px;
font-family: var(--font);
color: var(--color-key);
}
.shop-list li.double a{
padding: 7px 10px;
line-height: 1;
}
.shop-list li .small{
font-size:75%;
}
.en_bg01{
position: absolute;
left: 50%;
top: max(-5.5vw, -30px);
z-index: 2;
transform: translateX(-50%);
}
.en-top{
margin-top: -20px;
padding: 0 30%;
}
.span-f01{
font-size:min(4.3vw,22px);
}
/* =========================
header
========================= */
.header {
position: fixed;
inset: 0 auto auto 0;
width: 100%;
min-height: 55px;
z-index:5;
background: rgba(255,255,255,0.7);
}
.home .header{
background: none;
}
body.menu-open .header{
background: none !important;
}
.header-site-title {
position: absolute;
top: 1px;
left: 50%;
transform: translateX(-50%);
z-index: 20;
display: block;
width: auto;
white-space: nowrap;
font-size: 11px;
line-height: 1.4;
text-align: center;
margin: 0;
font-weight: 400;
pointer-events: auto;
}
.header-site-title a {
position: relative;
z-index: 21;
display: inline-block;
color: inherit;
text-decoration: none;
pointer-events: auto;
}
.logo {
display: flex;
justify-content: center;
align-items: center;
height: auto;
padding-top: 18px;
padding-bottom: 5px;
}
.logo img{
display: block;
width: 80px;
height: auto;
}
.circle-text{
display: none;
}
/* =========================
hamburger
========================= */
.hamburger {
position: fixed;
top: 0;
right: 0;
width: 56px;
height: 56px;
border: none;
cursor: pointer;
z-index: 7;
transition: var(--transition);
}
.hamburger span {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 2px;
background: #e82030;
transition: var(--transition);
}
.hamburger span:nth-child(1) {
top: 20px;
}
.hamburger span:nth-child(2) {
top: 27px;
}
.hamburger span:nth-child(3) {
top: 34px;
}
/* active */
.hamburger.active span:nth-child(1) {
top: 27px;
transform:
translateX(-50%)
rotate(45deg);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
top: 27px;
transform:
translateX(-50%)
rotate(-45deg);
}
body.menu-open {
overflow: hidden;
height: 100dvh;
overscroll-behavior: none;
}
/* =========================
mobile nav
========================= */
.nav {
position: fixed;
inset: 0;
opacity: 0;
visibility: hidden;
transition:
opacity .4s ease,
visibility .4s ease;
z-index: 6;
padding-top: 60px;
padding-bottom: 20px;
background: rgba(17,17,17,.94);
overflow-y: scroll;
}
.nav.active {
opacity: 1;
visibility: visible;
}
.nav-list a {
display: block;
border-bottom:solid 1px #666;
padding-block: var(--space-xs);
padding-inline: var(--space-sm);
background:url("../images/common/list03.png") right 20px center /8px no-repeat;
color: #fff;
font-size:clamp(12px, 4.3vw, 22px);
}
.area-list-sp{
padding: var(--space-sm);
display:grid;
gap:10px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.area-list-sp li a{
padding: var(--space-xs);
display: block;
background: rgba(255,255,255,0.9);
text-align: center;
font-size:min(4vw,16px);
}
/* =========================
contact
========================= */
#entry{
padding-block:var(--space-l);
background: url("../images/common/entry_bg01.jpg") center bottom / cover no-repeat;
}
#entry h2{
margin-bottom:55%;
}
#entry .inner{
padding-bottom: var(--space-l);
padding-inline: var(--space-sm);
background: rgba(232,32,48,0.85);
border-radius: 10px;
}
#entry .inner .text img{
margin-top: -53%;
}
#entry .inner ul li a{
padding: 15px 10px;
display: block;
border-radius: 20px;
background: #fff;
font-size:min(4.1vw,20px);
text-align: center;
}
#entry .inner ul li:first-of-type a img{
width: 20px;
vertical-align: -2px;
margin-right: var(--space-xs);
}
#entry .inner ul li:last-of-type a img{
width: 25px;
margin-right: var(--space-xs);
}
/* =========================
footer
========================= */
footer{
padding-bottom: 50px;
}
footer .footertop{
padding-top: var(--space-l);
padding-bottom: var(--space-sm);
padding-inline:var(--space-sm);
border-bottom:solid 1px #ccc;
}
footer .footertop .ttl img{
width: 80px;
}
footer .footertop ul{
display: flex;
justify-content: center;
}
footer .footertop ul li a{
padding-inline:5px;
text-decoration: underline;
font-size:90%;
}
footer .footerbottom{
padding: var(--space-xs);
line-height: 1.5;
font-size:75%;
}
#footerFloatingMenu {
display: block;
width: 100%;
position: fixed;
left: 0px;
bottom: 0px;
z-index: 4;
text-align: center;
}
#footerFloatingMenu ul {
display:grid;
grid-template-columns: repeat(3, 1fr);
}
#footerFloatingMenu ul li {
border-top:solid 1px #fff;
height: 50px;
line-height: 1;
}
#footerFloatingMenu ul li:first-child {
border-right: solid 1px #fff;
background: #f14646;
}
#footerFloatingMenu ul li:nth-child(2) {
border-right: solid 1px #fff;
background: #4CC665;
}
#footerFloatingMenu ul li:nth-child(3) {
background: #519cde;
}
#footerFloatingMenu ul li a {
position: relative;
display: block;
width: 100%;
height: 100%;
text-decoration: none;
text-align: center;
padding: 5px 0;
color: #fff;
font-size: 11px;
}
#footerFloatingMenu ul li:first-of-type img {
width: 31px;
}
#footerFloatingMenu ul li:nth-of-type(2) img {
margin-top: 1px;
width: 24px;
}
#footerFloatingMenu ul li:nth-of-type(3) img {
margin-top: 4px;
width: 26px;
}
#footerFloatingMenu ul li div {
position: absolute;
width: 100%;
left: 0;
bottom: 5px;
}
/* モーダル全体 */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 9;
opacity: 0;
visibility: hidden;
transition: .3s;
}
/* 表示時 */
.modal.is-active {
opacity: 1;
visibility: visible;
}
/* 背景 */
.modal__bg {
position: absolute;
inset: 0;
background: rgba(0,0,0,.8);
}
/* 中身 */
.modal__content {
left: 50%;
padding: 10% 5%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
overflow: auto;
}
.modal__content .text{
max-width: 440px;
margin: 0 auto 30px;
text-align: center;
font-size:min(3.8vw,18px);
}
.modal__content ul {
max-width: 380px;
margin: 0 auto;
}
.modal__content ul li a {
position: relative;
display: block;
padding: 10px 22%;
text-decoration: none;
background:var(--color-key) ;
color: #fff;
margin-bottom: 15px;
text-align: center;
border-radius: 20px;
font-size: min(3.8vw,16px);
}
.modal__content ul li a::before {
content: " ";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 15px;
background: url("../images/common/list02.png") no-repeat center center;
background-size: 100%;
}
.modal__content ul.f-tel a {
background:#f14646 url("../images/common/c_tel.png") no-repeat 10% center;
background-size: 13px;
}
.modal__content ul.f-line a {
background:#4CC665 url("../images/common/c_line.png") no-repeat 10px center;
background-size: 20px;
}
.f-line,
.f-tel {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.f-line li,
.f-tel li {
width: calc(50% - 10px);
list-style: none;
}
.f-line li a,
.f-tel li a {
display: block;
padding: 10px;
}
/* 閉じる */
.close {
margin-top: 20px;
text-align: center;
}
.close button {
width: 100px;
margin: 10px auto;
display: block;
text-align: center;
text-decoration: none;
background: #fff;
padding: 5px 10px;
color: #1a1a1a;
border-radius: 5px;
}
/* =========================
sidebar
========================= */
.sidebar {
display: none;
}
/* =========================
main
========================= */
.main {
width: min(100%, 560px);
margin-inline: auto;
background: #fff;
min-height: 100vh;
box-shadow:
0 0 30px rgba(0,0,0,.08);
overflow: hidden;
}
/* =========================
style
========================= */
#subimage{
padding-bottom:var(--space-sm);
background: url("../images/top/topimage_bg01.png")
center center / cover repeat;
}
#subimage .sub-top{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background: url("../images/chatlady/subimage.png") center bottom /cover no-repeat;
height: 55vh;
}
#subimage .sub-top .ttl1{
display: inline-block;
margin-bottom: var(--space-xs);
padding: var(--space-xs);
border:solid 1px var(--color-key);
background: #fff;
color: var(--color-key);
font-family:var(--font);
font-size:min(5vw,30px);
}
#subimage .sub-top .ttl2{
position: absolute;
left: 0;
top:58%;
width: 100%;
text-align: center;
color: var(--color-key);
font-family:var(--font);
font-size:min(4.5vw,22px);
text-shadow :
1px 1px 0px #ffffff,
-1px 1px 0px #ffffff,
1px -1px 0px #ffffff,
-1px -1px 0px #ffffff,
1px 0px 0px #ffffff,
0px 1px 0px #ffffff,
-1px 0px 0px #ffffff,
0px -1px 0px #ffffff; /* 文字の影 */
}
#subimage .sub-bottom{
display: flex;
justify-content: center;
align-items: center;
height: 16vh;
padding: 0 2%;
font-size:clamp(12px, 4.2vw, 18px);
}
/*------------------パンくず----------------*/
#breadcrumb{
position: relative;
background: rgba(255,255,255,0.6);
z-index: 2;
}
#breadcrumb ul{
padding:5px 5px 5px 12px;
display: flex;
flex-wrap: wrap;
gap: 0 4px;
}
#breadcrumb ul li{
font-size:75%;
}
#breadcrumb::after{
content: " ";
display: block;
clear: both;
}
/*----------------faqアコーディオン---------------*/
.faq-list {
padding: 15px;
background: #ffeae1;
}
/* 質問部分 */
.faq-list dt {
display: flex;
align-items: center;
gap: 12px;
position: relative;
cursor: pointer;
}
/* Q画像 */
.icon-q {
width: 19px;
height: 23px;
background: url("../images/common/q.png") no-repeat center / contain;
flex-shrink: 0;
}
/* 開閉記号 */
.toggle {
margin-left: auto;
font-size: 24px;
line-height: 1;
color: var(--color-key);
}
/* 回答部分 */
.faq-list dd {
display: none;
}
.faq-list.active dd{
padding-top:15px;
margin-top:15px;
border-top:dotted 2px var(--color-key);
display: flex;
gap: 12px;
font-size:90%;
}
/* A画像 */
.icon-a {
width: 20px;
height: 19px;
background: url(../images/common/a.png) no-repeat center / contain;
flex-shrink: 0;
margin-top: 4px;
}
/* テキスト */
.answer-text {
flex: 1;
line-height: 1.8;
}
/* 開いている時 */
.faq-list.active dd {
display: flex;
}
.faq-list.active .toggle {
content: "－";
}
/*-----------------【続きを読む】をクリックで開く----------------*/
/* コンテナ */
.cp_box {
position: relative;
}
/* チェックボックスは視覚的に隠すが、キーボード操作できる状態を維持 */
.cp_toggle {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
/* ボタン（ラベル） */
.cp_btn {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: inline-block;
padding: 15px 50px 15px 20px;
background: #333;
color: #fff;
border-radius: 20px;
cursor: pointer;
user-select: none;
font-size: 90%;
line-height: 1;
}
/* 閉じているとき：下向き（画像そのまま） */
.cp_btn::after {
content: "";
position: absolute;
right: 15px;
top: 50%;
width: 16px;
height: 16px;
background: url("../images/common/list02.png") no-repeat center;
background-size: contain;
transform: translateY(-50%) rotate(0deg);
transition: transform .3s ease;
}
/* 開いているとき：画像を180度回転 → 上向きになる */
.cp_toggle:checked+.cp_btn::after {
transform: translateY(-50%) rotate(180deg);
}
.cp_btn:focus-within,
.cp_btn:focus-visible {
outline: 2px solid #1d77b2;
outline-offset: 2px;
}
/* 「続きを読む」/「閉じる」の表示切替（CSSのcontentで文字を出さない） */
.cp_btn .less {
display: none;
}
.cp_toggle:checked+.cp_btn .more {
display: none;
}
.cp_toggle:checked+.cp_btn .less {
display: inline;
}
.cp_toggle:checked+.cp_btn {
bottom:10px;
}
/* 折りたたみ本体（height:auto はアニメ不可→ max-heightで疑似スライド） */
.cp_container {
padding-bottom: 60px;
position: relative;
overflow: hidden;
max-height: 9.375rem;
/* 150px 相当。好みで調整 */
transition: max-height .5s ease, opacity .3s ease;
opacity: 1;
}
/* 下部のフェード（「続きがある感」を出す） */
.cp_container::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3rem;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
pointer-events: none;
transition: opacity .3s ease;
}
/* 展開時 */
.cp_toggle:checked~.cp_container {
max-height: 200rem;
/* 充分に大きい値にして“実質無制限” */
}
.cp_toggle:checked~.cp_container::after {
opacity: 0;
}
/* 省エネモードの人に優しく */
@media (prefers-reduced-motion: reduce) {
.cp_container {
transition: none;
}
.cp_container::after {
transition: none;
}
}
.cp_container p{
line-height: 1.6;
font-size:95%;
}
/**----------応募フォーム----------------*/
.entry-form ul dl{
border-bottom:solid 1px #fff;
padding-bottom: var(--space-sm);
margin-bottom: var(--space-sm);
}
.entry-form ul li:last-of-type dl{
border-bottom:none;
}
.entry-form ul dl dt{
margin-bottom: var(--space-xs);
color: var(--color-key);
font-family: var(--font);
font-size:105%;
font-weight: bold;
}
.entry-form ul dl dt .hissu{
float: right;
padding: 0 5px;
display: inline-block;
background: var(--color-key);
color: #fff;
font-size:min(3.3vw,16px);
font-weight: normal;
}
.entry-form ul dl dd{
clear:both;
}
input[type=text],input[type=email],input[type=date],textarea{
width:100%;
border:solid 1px var(--color-key);
background: #fff;
padding: 10px;
border-radius: 5px;
}
input[type=text]#nenrei{
width: 80px;
text-align: center;
margin-right: 10px;
}
.entry-form .name {
display: flex;
}
.entry-form .name div.sei{
margin-right:min(3vw,15px);
}
.entry-form .name div span{
display: inline-block;
width:45px;
text-align: center;
}
.entry-form .name input[type=text]{
width:min(29vw,170px);
}
input[type=checkbox]{
margin-right: 5px;
}
input[type=radio]{
margin-right: 5px;
}
input[type="checkbox"] {
width: 20px;
height: 20px;
accent-color:var(--color-key);
vertical-align: -5px;
}
textarea{
height:200px;
}
.select01{
position: relative;
width: 100%;
max-width: 300px;
}
.select01 select{
width: 100%;
padding: 14px 50px 14px 16px;
border: 1px solid var(--color-key);
border-radius: 5px;
background: #fff;
font-size: 16px;
line-height: 1.4;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
transition: .3s;
}
/* hover */
.select01 select:hover{
border-color: var(--color-key);
}
/* focus */
.select01 select:focus{
outline: none;
border-color: var(--color-key);
}
/* 矢印 */
.select01::after{
content: "";
position: absolute;
top: 50%;
right: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #d60000;
border-bottom: 2px solid #d60000;
transform:
translateY(-60%)
rotate(45deg);
pointer-events: none;
}
.c-box{
display: flex;
flex-wrap: wrap;
}
.c-box div{
margin-right: 2em;
margin-bottom: 5px;
}
input::placeholder,textarea::placeholder {
color: #aaa;
}
input[type=submit]{
display: inline-block;
border: none;
padding: 15px 50px 15px 30px;
background: #dc3644 url("../images/common/link02.png") right 10px center / 20px no-repeat;
font-size: min(4.5vw, 20px);
color: #fff;
text-decoration: none;
text-align: center;
font-family: var(--font);
border-radius: 20px;
box-shadow: 0px 0px 8px rgba(103,92,93,0.5);
}
input[type=submit]:hover{
transform: scale(1.03);
}
/* =========================
ブログ
========================= */
.archive-box{
padding-block:var(--space-sm);
border-bottom:solid 1px #fbdcdb;
}
.archive-box a{
display: block;
}
.archive-box figure img{
border-radius: 15px;
}
.archive-box .ttl1{
margin-bottom: var(--space-xs);
font-weight: bold;
}
.archive-box .text{
margin-bottom:5px;
}
.archive-box .text p{
font-size:90%;
line-height: 1.3;
}
#blog .date{
background: url("../images/common/icon02.png") left center / 10px no-repeat;
padding-left: 15px;
color: #aaa;
font-size:90%;
}
#blog .cate{
display: flex;
flex-wrap: wrap;
gap:5px;
}
#blog .cate li{
margin-bottom: 5px;
padding:5px;
background: var(--color-key);
color: #fff;
font-size:min(2.5vw,14px);
}
#blog .blog-info1{
display: flex;
align-items: center;
gap:10px;
}
.blog-main .inner .ttl{
font-size:110%;
}
.auther{
border: solid 1px #dddddd;
border-radius: 8px;
background: #f8f8f8;
padding: 14px 20px 16px;
max-width: 404px;
margin: 0 auto var(--space-md);
color: #555555;
overflow: hidden;
}
.auther .photo{
float: left;
margin: 0 18px 8px 0 !important;
text-align: left;
}
.auther .photo img{
width: 76px;
height: 76px;
object-fit: cover;
border-radius: 50%;
}
.auther .name{
margin: 0 0 6px !important;
padding-top: 2px;
}
.auther .name1{
font-size: 90%;
color: #666666;
text-align: left !important;
}
.auther .name2{
font-size: 105%;
font-weight: 700;
text-align: left !important;
}
.auther p{
margin: 0;
line-height: 1.8;
font-size: 90%;
}
@media screen and (max-width: 480px) {
.auther{
padding: 14px;
}
.auther .photo{
margin-right: 14px !important;
}
.auther .photo img{
width: 64px;
height: 64px;
}
}
.adjacent_post_links ul{
display: flex;
justify-content: space-between;
}
.adjacent_post_links ul li a{
display: block;
padding: var(--space-xs);
border:solid 1px var(--color-key);
color: var(--color-key);
background: #fff;
font-size:85%;
text-decoration: none;
border-radius: 5px;
}
/*Pagenation*/
.pagination {
clear: both;
position: relative;
line-height: 1em;
text-align: center;
}
.pagination-box {
display: inline-block;
}
.pagination span,
.pagination a {
display: block;
float: left;
margin: 2px 2px 2px 0;
padding: 10px 14px 10px 14px;
text-decoration: none;
width: auto;
color: var(--color-key);
background: #fff;
border: solid 1px var(--color-key);
border-radius: 3px;
}
.pagination span.page-of {
background: none;
color: var(--color-key);
border: none;
}
.pagination a:hover {
color: #fff;
background:var(--color-key);
border: solid 1px var(--color-key);
}
.pagination .current {
padding: 10px 14px 10px 14px;
color: #fff;
background:var(--color-key);
border: solid 1px var(--color-key);
}
#blog02{
padding-bottom: var(--space-xl);
}
#blog02 .slider2.ulstyle01 figure{
aspect-ratio: 16 / 9;
overflow: hidden;
}
#blog02 .slider2.ulstyle01 figure img{
width: 100%;
height: 100%;
object-fit: cover;
}
#blog02 .hstyle02{
position: relative;
}
#blog02 .hstyle02::before{
content: " ";
position: absolute;
left: 15%;
top:50%;
width: 70%;
height: 1px;
background: var(--color-key);
}
#blog02 .hstyle02 .p-i01{
position: relative;
display: inline-block;
z-index: 2;
background: #ffeae1;
}
.cate-list li a{
border-bottom:dotted 2px #333;
display: block;
background:url("../images/common/icon01.png") left center / 15px no-repeat;
padding: 10px 10px 10px 25px;
}
/*お役立ちコラム*/
/*-----------------------------------
内部リンクをショートコードでブログカード化
------------------------------------*/
#blog01 .text p {
margin-bottom: var(--space-sm);
}
.txt-bold { font-weight: bold !important; }
.txt-Red { color: #ff001a !important;font-weight: bold }
.txt-Blue { color: #0e328d !important;font-weight: bold }
.txt-Pink { color: #eb6c8b !important;font-weight: bold }
.blog-card {
border: 1px solid #ddd;
word-wrap: break-word;
max-width: 100%;
border-radius: 5px;
margin-bottom: 30px;
}
.blog-card a {
color: #333;
background: #fbfaf8;
display: block;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.blog-card a:hover {
background: #fee;
}
.blog-card-thumbnail {
float: left;
padding: 10px;
}
.blog-card-thumbnail img {
display: block;
padding: 0;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.blog-card-content {
line-height: 120%;
}
.blog-card-title {
padding: 10px 10px 10px 0;
font-size: 85%;
font-weight: bold;
}
.blog-card-title::before {
content: '関連記事';
font-size: 0.7em;
font-weight: bold;
color: #fff;
background: #111;
width: 5em;
display: inline-block;
padding: 0.2em;
position: relative;
top: -2px;
text-align: center;
margin-right: 0.5em;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.blog-card-date {
color: #333;
font-size: 75%;
margin-right: 10px;
}
.column_wrap p{
font-size:90%;
}
.cat_list{
padding:2px 0 0 0;
text-indent: 5px;
}
/* ★目次 */
#toc_container {
max-width: 640px;
margin: 1.5em auto 3em;
padding: 1.5em 2.5em;
background: #fff;
border: 1px solid #cdcdcd;
list-style-type: none;
font-size: 95%;
}
#toc_container p {
font-size: 1.2em;
line-height: 1.33;
margin-bottom: 1em;
color: #333;
text-align: center;
border-bottom: solid 1px #eee;
}
#toc_container ul {
counter-reset: item;
list-style-type: none;
padding-left: 0;
font-size: 95%;
}
#toc_container ul li {
list-style: none !important;
/* font-weight: 600; */
/*margin-bottom: 5px;*/
}
#toc_container ul li ul {
padding-left: 1em !important;
margin: 1rem 0;
}
/*#toc_container ul li:before {
counter-increment: item;
content: counters(item, "-")". ";
color: #ff001a;
}*/
#toc_container ul li a {
line-height: 5px !important;
}
/* ★目次 */
.column_wrap .pageindex {
max-width: 640px;
margin: 1.5em auto 3em;
padding: var(--space-sm);
background: #fff;
border: 1px solid #cdcdcd;
list-style-type: none;
font-size:95%;
}
.column_wrap .pageindex p {
font-size: 1.2em;
line-height: 1.33;
padding-bottom: 1em;
color: #333;
text-align: center;
border-bottom: solid 1px #eee;
}
.column_wrap .pageindex ol {
counter-reset: item;
list-style-type: none;
padding-left: 0;
}
.column_wrap .pageindex ol li {
list-style: none !important;
/* font-weight: 600; */
/*margin-bottom: 5px;*/
}
.column_wrap .pageindex ol li ol {
padding-left: 1em !important;
margin: 1rem 0;
}
.column_wrap .pageindex ol li:before {
counter-increment: item;
content: counters(item, "-")". ";
}
.column_wrap .pageindex ol li a {
line-height: 5px !important;
}
/* ★大見出し */
.column_wrap .tt1 {
font-size: 1.2em;
line-height: 1.33;
margin:2em 0 1em;
padding: 1rem 1rem 1rem 1.2rem;
color: #333;
background: #f5f5f5;
font-weight: bold;
border-left: 5px solid #000000;
}
/* ★小見出し */
.column_wrap .tt2 {
font-size: 1.2em;
margin: 0 0 1em;
padding: 1rem 1rem 0.8rem 0;
border-bottom: 1px solid #000 !important;
background: none;
font-weight:bold;
}
.waku01 {
border: solid 1px #ccc;
padding:var(--space-sm);
margin-bottom: 20px;
}
.waku02 {
padding: 10px;
border-radius: 5px;
background-color: #fde7ef;
margin: 5px 0px;
}
.column_wrap .borderbox {
margin: 0.5em auto;
padding: 1em;
border: 1px solid #A0A0A0;
}
.column_wrap .borderbox li a {
font-size:95%;
}
.column_wrap ol li{
list-style:decimal;
margin-left: 20px;
}
.column_wrap ul li{
list-style:disc;
margin-left: 20px;
}
.column_wrap table th,.column_wrap table td{
padding: var(--space-xs);
border:solid 1px #ccc;
font-size:90%;
}
.column_wrap table th{
background: #efefef;
}
/* ★テキスト装飾 */
.column_wrap .txt_red {
color: #F00;
}
.column_wrap .txt_bold {
font-weight: bold;
text-align: center;
}
.column_wrap .txt_ul {
text-decoration: underline;
}
.column_wrap .txt_size_small {
font-size: 12px;
}
.column_wrap .txt_size_big {
font-size: 16px;
}
.txt_size_small {
font-size: 12px;
}
.txt_size_big {
font-size: 16px;
}
/* ★背景色 */
.column_wrap .bg_red {
background: #fff0f4 !important;
}
.column_wrap .bg_blue {
background: #f6faff !important;
}
.column_wrap .bg_green {
background: #E8FCDB !important;
}
.column_wrap .bg_yellow {
background: #FFFCDB !important;
}
.column_wrap .bg_violet {
background: #E7D5E8 !important;
}
.column_wrap .bg_orange {
background: #FEECD2 !important;
}
.column_wrap .bg_stripe {
background: -webkit-repeating-linear-gradient(-45deg, #ffffff, #ffffff 3px, #f5f5f5 3px, #f5f5f5 7px);
background: repeating-linear-gradient(-45deg, #ffffff, #ffffff 3px, #f5f5f5 3px, #f5f5f5 7px);
}
.cate {
padding: 0 20px 0px 20px;
}
/* =========================
animation
========================= */
/*----- fade animation---------*/
.fadeUp {
opacity: 0;
transform: translateY(20px);
transition:
opacity .8s ease,
transform .8s ease;
}
.fadeUp.show {
opacity: 1;
transform: translateY(0);
}
/* delay */
.delay1 {
transition-delay: .2s;
}
.delay2 {
transition-delay: .4s;
}
/*----- ループ---------*/
@keyframes infinity-scroll-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.scroll-infinity__wrap {
display: flex;
overflow: hidden;
}
.scroll-infinity__list {
display: flex;
list-style: none;
padding: 0
}
.scroll-infinity__list--left {
animation: infinity-scroll-left 60s infinite linear 0.5s both;
}
.scroll-infinity__item {
padding-inline:10px;
width: calc(100vw / 3);
}
.scroll-infinity__list li:nth-of-type(even){
padding-top: 20px;
}
.scroll-infinity__item>img {
width: 100%;
}
/* =========================
pc
========================= */
@media (min-width: 500px) {
body{
font-size:18px;
}
.hstyle01 .ttl1{
font-size:100%;
}
.hstyle01 .ttl1 img{
height: 20px;
vertical-align: -4px;
}
.ulstyle02.ul02-v2 li .ttl1{
width: 32%;
}
.ulstyle06 li{
height: 55px;
padding: 12px;
}
.scroll-infinity__item {
width: calc(100vw / 5);
}
#footerFloatingMenu{
max-width:560px;
left: 50%;
transform: translateX(-50%);
}
#subimage .sub-bottom{
width: 450px;
margin-inline:auto;
}
}
@media screen and (min-width: 1000px) {
.header{
background: none;
}
/* hide mobile */
.hamburger,
.nav {
display: none;
}
.header{
z-index: 20;
width:420px;
inset:0 0 auto auto;
left: 0;
padding:
40px
20px;
}
.logo{
display: inline-block;
height: auto;
padding-top: 0;
}
.header-site-title{
top: 12px;
left: 20px;
transform: none;
font-size: 12px;
text-align: left;
z-index: 1001;
}
.header-site-title a{
position: relative;
z-index: 1002;
pointer-events: auto;
}
#footerFloatingMenu{
display: none;
}
/* sidebar */
.sidebar {
display: block;
position: fixed;
top: 0;
left:0;
width:420px;
height: 100vh;
padding:140px 60px 140px 30px;
z-index:5;
}
.pc-nav{
display: flex;
}
.pc-nav-list{
margin-right: 70px;
}
.pc-nav-list li{
position: relative;
}
.pc-nav-list li + li {
margin-top: 24px;
}
.pc-nav-list a {
transition:var(--transition);
}
.pc-nav-list li a.current{
color: var(--color-key);
}
.pc-nav-list a:hover {
color: var(--color-key);
}
.pc-nav-list li a::after {
position: absolute;
left:-20px;
content: '●';
opacity: 0;
transition: 0.5s;
color: var(--color-key);
}
.pc-nav-list li a.current::before {
position: absolute;
left:-20px;
content: '●';
color:var(--color-key);
}
.pc-nav-list li a:hover::after {
opacity: 1;
}
.area-list li{
position: relative;
margin-bottom: 15px;
font-size:90%;
}
.area-list li a{
transition:var(--transition);
}
.area-list li a.current{
color: var(--color-key);
}
.area-list li a.current::before{
position: absolute;
left:-20px;
content: '●';
color:var(--color-key);
}
.area-list li a:hover{
color: var(--color-key);
}
.contact-nav{
display: flex;
justify-content: space-between;
}
.contact-nav li{
width: 48%;
}
.contact-nav li a{
display: block;
padding: 15px 10px;
border:solid 1px var(--color-key);
background: #fff;
color:var(--color-key);
border-radius: 30px;
text-align: center;
transition:var(--transition);
}
.contact-nav li:first-of-type a img{
width: 25px;
vertical-align: -5px;
margin-right: var(--space-xs);
}
.contact-nav li:last-of-type a img{
width: 22px;
vertical-align: -1px;
margin-right: var(--space-xs);
}
.contact-nav li a:hover{
background: #fef3f0;
}
.circle-text {
display: block;
position: fixed;
bottom: -30vw;
right: -10vw;
width:80vw;
aspect-ratio: 1 / 1;
pointer-events: none;
z-index: -1;
animation:
rotate-circle 80s linear infinite;
}
.circle-text svg {
width: 100%;
height: 100%;
overflow: visible;
}
.circle-text text {
fill:rgba(255,255,255,0.4);
font-size: clamp(8px, .5vw, 14px);
letter-spacing: .12em;
text-transform: uppercase;
}
@keyframes rotate-circle {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* main */
.main {
margin-inline:auto 0;
}
#subimage .sub-top{
height: 560px;
}
#subimage .sub-bottom{
height: 160px;
}
.scroll-infinity__item {
width: calc(100vw / 8);
}
.prev-arrow {
left:-20px;
}
.next-arrow {
right: -20px;
}
}
@media screen and (min-width: 1120px) {
.main {
margin-left: 50%;
}
.sidebar,.header {
left: inherit;
right:60%;
}
}
html {
scroll-behavior: smooth;
}
.page-top {
position: fixed;
right: 14px;
bottom: 64px;
z-index: 8;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: solid 1px var(--color-key);
border-radius: 50%;
background: rgba(255,255,255,0.9);
color: var(--color-key);
font-size: 18px;
line-height: 1;
text-decoration: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.page-top:hover {
background: #fef3f0;
}
@media screen and (min-width: 1000px) {
.page-top {
right: 24px;
bottom: 24px;
}
}
.circle-text,
.circle-text * {
-webkit-user-select: none;
user-select: none;
pointer-events: none;
}
.page-top {
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.page-top:focus {
outline: none;
}
/* HOME: 未経験者Q&A */
#top-beginner-faq .hstyle03 {
margin-top: 10px;
padding-top: var(--space-xl);
}
#top-beginner-faq .faq-list {
width: calc(100% - 40px);
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
#sapporo_01 .sapporo-about-title {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 690px;
aspect-ratio: 690 / 400;
margin-left: auto;
margin-right: auto;
overflow: hidden;
border-radius: 0 70px 0 70px;
background: url("../images/area/sapporo/sapporo_ttl1.png?v=20260723") center / cover no-repeat;
}
#sapporo_01 .sapporo-about-title__text {
display: inline-block;
padding: 0.72em 1.6em;
border: 2px solid var(--color-key);
background: rgba(255, 255, 255, 0.94);
color: var(--color-key);
font-family: var(--font);
font-size: clamp(20px, 4.2vw, 30px);
line-height: 1.3;
letter-spacing: 0;
text-align: center;
white-space: nowrap;
}
#sendai_01 .sendai-about-title {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 690px;
aspect-ratio: 690 / 400;
margin-left: auto;
margin-right: auto;
overflow: hidden;
border-radius: 0 70px 0 70px;
background: url("../images/area/sendai/sendai_ttl1.png?v=20260723") center / cover no-repeat;
}
#sendai_01 .sendai-about-title__text {
display: inline-block;
padding: 0.72em 1.6em;
border: 2px solid var(--color-key);
background: rgba(255, 255, 255, 0.94);
color: var(--color-key);
font-family: var(--font);
font-size: clamp(20px, 4.2vw, 30px);
line-height: 1.3;
letter-spacing: 0;
text-align: center;
white-space: nowrap;
}
#tokyo_01 .tokyo-about-title {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 690px;
aspect-ratio: 690 / 400;
margin-left: auto;
margin-right: auto;
overflow: hidden;
border-radius: 0 70px 0 70px;
background: url("../images/area/tokyo/tokyo_tti1.png?v=20260723") center / cover no-repeat;
}
#tokyo_01 .tokyo-about-title__text {
display: inline-block;
padding: 0.72em 1.6em;
border: 2px solid var(--color-key);
background: rgba(255, 255, 255, 0.94);
color: var(--color-key);
font-family: var(--font);
font-size: clamp(20px, 4.2vw, 30px);
line-height: 1.3;
letter-spacing: 0;
text-align: center;
white-space: nowrap;
}
#hiroshima_01 .hiroshima-about-title {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 690px;
aspect-ratio: 690 / 400;
margin-left: auto;
margin-right: auto;
overflow: hidden;
border-radius: 0 70px 0 70px;
background: url("../images/area/hiroshima/hiroshima_ttl01.png?v=20260723") center / cover no-repeat;
}
#hiroshima_01 .hiroshima-about-title__text {
display: inline-block;
padding: 0.72em 1.6em;
border: 2px solid var(--color-key);
background: rgba(255, 255, 255, 0.94);
color: var(--color-key);
font-family: var(--font);
font-size: clamp(20px, 4.2vw, 30px);
line-height: 1.3;
letter-spacing: 0;
text-align: center;
white-space: nowrap;
}
@media screen and (max-width: 480px) {
#top-beginner-faq .faq-list {
width: calc(100% - 32px);
}
#sapporo_01 .sapporo-about-title {
border-radius: 0 46px 0 46px;
}
#sapporo_01 .sapporo-about-title__text {
padding: 0.65em 1.25em;
font-size: 20px;
}
#sendai_01 .sendai-about-title {
border-radius: 0 46px 0 46px;
}
#sendai_01 .sendai-about-title__text {
padding: 0.65em 1.25em;
font-size: 20px;
}
#tokyo_01 .tokyo-about-title {
border-radius: 0 46px 0 46px;
}
#tokyo_01 .tokyo-about-title__text {
padding: 0.65em 1.25em;
font-size: 20px;
}
#hiroshima_01 .hiroshima-about-title {
border-radius: 0 46px 0 46px;
}
#hiroshima_01 .hiroshima-about-title__text {
padding: 0.65em 1.25em;
font-size: 20px;
}
}
@charset "utf-8";
/* =========================
toppage
========================= */
#topimage{
padding-top:40px;
padding-bottom: 15px;
background: url("../images/top/topimage_bg01.png")
center center / cover repeat;
}
#topimage .slick-dots{
margin: 0;
}
#topimage .ulstyle01 li .text.first{
padding-block:20px;
}
#topimage .ulstyle01 li .ttl{
padding-block:min(1vw,10px);
background: var(--color-key);
font-family:var(--font);
font-size:min(7vw,35px);
}
#topimage .ulstyle01 li .text{
padding:0 10px 10px;
}
#topimage .ulstyle01 li dl{
display: flex;
justify-content: space-between;
align-items: center;
}
#topimage .ulstyle01 li dl dt{
width: 35px;
padding-block:5px;
border:solid 1px var(--color-key);
color:var(--color-key);
border-radius: 5px;
font-size:min(3.5vw,15px);
text-align: center;
}
#topimage .ulstyle01 li dl dd{
width: calc(100% - 45px);
font-size:min(2.8vw,15px);
}
#topimage .ulstyle01 li .text.third dl dd{
font-size:min(3.2vw,18px);
}
#topimage .ulstyle01 li .text.third .txtWhite{
background: #333;
width: 30px;
height: 30px;
display: inline-block;
line-height: 1;
border-radius: 50%;
vertical-align:5px;
text-align: center;
}
#topimage .slick-dotted.slick-slider{
margin-bottom: 0;
}
#guide .hstyle01{
margin-top: -15px;
}
#step{
position: relative;
}
#step .en01{
position: absolute;
left: 0;
width: 110%;
top: max(-5.5vw, -30px);
}
#step h2{
padding-inline:24%;
}
#step .ulstyle01 li .text{
padding: 0;
}
#step .slick-dotted.slick-slider{
margin-bottom: 0;
}
#fuan .ulstyle02 li p{
width: 82%;
}
#fuan .ulstyle02 li:nth-of-type(even) p{
margin-left: 18%;
}
#ok h2{
position: relative;
z-index: 2;
padding-right:5vw;
}
#trial .hstyle01{
margin-top: -15px;
}
#supportpoint{
padding-bottom:var(--space-2xl);
position: relative;
}
#supportpoint::before{
content: " ";
position: absolute;
left: 0;
top:15%;
width: 100%;
height:85%;
background: linear-gradient(to bottom, #fff1eb 0%,#ffcfca 100%);
z-index: 1;
}
#supportpoint h3,#supportpoint ul{
position: relative;
z-index: 2;
}
#supportpoint ul li .inner{
width: 90%;
padding-block:var(--space-sm);
border-radius: 0 50px 50px 0;
box-shadow: 3px 3px 8px rgba(0,0,0,0.1);
}
#supportpoint ul li:nth-of-type(1) .inner{
background: #fff url("../images/top/support_bg01.png") right 25px top 20px / auto 44px no-repeat;
}
#supportpoint ul li:nth-of-type(2) .inner{
margin-left: 10%;
background: #fff url("../images/top/support_bg02.png") left 25px top 20px / auto 44px no-repeat;
border-radius: 50px 0 0 50px;
}
#supportpoint ul li:nth-of-type(3) .inner{
background: #fff url("../images/top/support_bg03.png") right 25px top 20px / auto 44px no-repeat;
}
#supportpoint ul li .inner h4{
font-size:clamp(16px, 5vw, 24px);
}
#supportpoint ul li .inner h4 .bg02{
display: inline-block;
padding: 0 10px;
}
#supportpoint ul li:nth-of-type(2) h4{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
#supportpoint ul li:nth-of-type(odd) .inner p{
padding:0 8% 0 4%;
line-height: 1.6;
}
#supportpoint ul li:nth-of-type(even) .inner p{
padding:0 4% 0 8%;
line-height: 1.6;
}
/*----------------チャットレディについて------------------*/
#chatlacy01 figure{
margin-top: -8%;
}
/*----------------店舗紹介------------------*/
#shop #subimage .sub-top{
background: url("../images/shop/subimage.png") center bottom /cover no-repeat;
}
/*----------------面接の流れ------------------*/
#flow #subimage .sub-top{
background: url("../images/flow/subimage.png") center bottom /cover no-repeat;
}
#flow02 .en01{
position: absolute;
left: 0;
top: max(-5.5vw, -30px);
z-index: 2;
}
#flow02 h2{
position: relative;
padding: 0 15%;
z-index: 2;
}
#flow .ulstyle01.point01 li.inner .ttl{
background: var(--color-key);
color: #fff;
border-radius: 10px 10px 0 0;
}
#flow02 .ulstyle01.point01 li.inner{
position: relative;
margin-bottom: 75px;
}
#flow02 .ulstyle01.point01 li.inner::after{
content: " ";
position: absolute;
left: 50%;
bottom:-30px;
transform: translateX(-50%);
width: 37px;
height: 18px;
background: url("../images/flow/next.png") center bottom / 100% no-repeat;
}
#flow02 .ulstyle01.point01 li.inner:last-of-type::after{
content: none;
}
#flow02 .ulstyle01.point01 li.inner:first-of-type .f-right{
width: 42%;
margin-left: 8%;
}
#flow02 .ulstyle01.point01 li.inner:last-of-type{
margin-bottom: 0;
}
#flow02 .ulstyle01.point01 li.inner .box01{
background: #fef7f7;
}
#flow02 .ulstyle01.point01 li.inner .box01 .ttl{
padding-block:var(--space-xs);
background: none;
color: var(--color-key);
border-radius:0;
}
#flow02 .ulstyle01.point01 li.inner .box01 .ttl img{
width: 40px;
vertical-align: -15px;
margin-right: 10px;
}
#flow02 .ulstyle01.point01 li.inner .box01 p{
padding-inline:var(--space-xs);
padding-bottom: var(--space-sm);
}
#flow02 .box02{
position: relative;
padding: var(--space-sm);
padding-bottom:var(--space-4xl);
background: url("../images/flow/bg01.png") center center / auto 100% no-repeat;
z-index: 2;
}
#flow02 .box02 .hstyle02{
background: url("../images/flow/flow_bg2.png") center top / 140px no-repeat;
padding-top: 150px;
font-size:min(5vw,24px)
}
#flow03 h2{
padding: 0 16%;
}
/*----------------報酬について------------------*/
#reward #subimage .sub-top{
background: url("../images/reward/subimage.png") center bottom /cover no-repeat;
}
#reward .case{
padding: var(--space-sm);
background: #fef7f7;
}
#reward .case .casettl{
margin-bottom: var(--space-sm);
padding:5px;
background:var(--color-key);
color:#fff;
border-radius:20px;
text-align: center;
}
#reward02{
padding-bottom: var(--space-2xl);
}
#reward02 h2{
padding-inline:20%;
}
#reward02 h2 img{
margin-top: -25px;
}
.modelcase .inner{
padding-bottom: var(--space-l);
border-bottom:solid 1px #fff;
}
.modelcase .ttl1 .name{
padding-block: var(--space-xs);
padding-inline: var(--space-sm);
display: inline-block;
background: var(--color-key);
color: #fff;
border-radius: 20px;
}
.modelcase .box{
padding-block: var(--space-sm);
padding-left: 25%;
position: relative;
background: rgba(255,255,255,0.8);
border-radius: 40px 40px 0 0;
}
.modelcase .box .girl{
position: absolute;
left: 3%;
top:-5%;
height: 182px;
width: auto;
}
.modelcase .box .profile{
width: 45px;
}
.modelcase .box ol li{
list-style-type: disc;
margin-left:1em;
}
.modelcase .box ol li dl{
display: flex;
}
.modelcase .box ol li dl dt{
width: 40%;
}
.modelcase .box ol li dl dd{
width: 60%;
line-height: 1.2;
}
.modelcase .box .namettl{
width: 95%;
border-bottom:solid 1px #333;
background: url("../images/experiences/name.png") left center /40px no-repeat;
padding: 5px 5px 5px 50px;
}
.case-dl1{
display: flex;
justify-content: space-between;
}
.case-dl1 dt{
width:18%;
}
.case-dl1 dd{
width: 78%;
}
#reward05{
padding-top: 25%;
background: url("../images/reward/q&a_bg.jpg") center top / 100% no-repeat;
}
#reward05 h2{
margin-inline:5%;
padding-block: var(--space-xl);
background: #dc3644;
color: #fff;
text-align: center;
font-family: var(--font);
font-size:min(5.5vw,28px);
border-radius: 30px;
box-shadow: 0 0 8px rgba(103,92,93,0.8);
}
#reward05 h3{
margin-inline:5%;
}
/*--------------サポート体制------------------*/
#support #subimage .sub-top{
background: url("../images/support/subimage.png") center bottom /cover no-repeat;
}
#support02 .support-ttl1{
padding: 0 15%;
}
#support03 .support-ttl2{
padding: 0 5%;
}
/*--------------体験談-----------------*/
#experiences #subimage .sub-top{
background: url("../images/experiences/subimage.png") center bottom /cover no-repeat;
}
#voice02{
position: relative;
}
#voice02 .en01{
position: absolute;
left: 50%;
top: max(-5.5vw, -30px);
transform: translateX(-50%);
z-index: 2;
max-width: 200px;
}
#experiences .modelcase .box ol li{
margin-bottom: 5px;
}
#experiences .modelcase .box ol li dl{
font-size:90%;
}
#experiences .modelcase .box ol li dl dt{
width: 5em;
}
#experiences .modelcase .box ol li dl dd{
width: calc(100% - 5em);
line-height: inherit;
}
#experiences .modelcase .box .girl{
height: 220px;
}
#experiences .modelcase .box .girl.girl02,#experiences .modelcase .box .girl.girl05,#experiences .modelcase .box .girl.girl06,#experiences .modelcase .box .girl.girl10{
top:0;
left: 0px;
height: 200px;
}
#experiences .modelcase .box .girl.girl04,#experiences .modelcase .box .girl.girl13{
top:10px;
left: 0px;
height: 180px;
}
#experiences .modelcase .box .girl.girl08,#experiences .modelcase .box .girl.girl09,#experiences .modelcase .box .girl.girl11,#experiences .modelcase .box .girl.girl12,#experiences .modelcase .box .girl.girl15{
top:0;
left: 5px;
height: 210px;
}
#experiences .prev-arrow,#experiences .next-arrow{
top:10px;
}
/*--------------ブログ-----------------*/
#blog #subimage .sub-top{
background: url("../images/common/subimage_blog.png") center bottom /cover no-repeat;
}
/*--------------よくある質問-----------------*/
#question #subimage .sub-top{
background: url("../images/question/subimage.png") center bottom /cover no-repeat;
}
/*タブ切り替え全体のスタイル*/
.tabs {
margin-top: 50px;
padding-bottom: 40px;
margin: 0 auto;}
/*タブのスタイル*/
.tab_item {
float: left;
width: calc(100%/5);
height:clamp(60px,17.5vw,74px);
padding-top: 32px;
border-top:solid 1px var(--color-key);
border-right:solid 1px var(--color-key);
border-bottom:solid 1px var(--color-key);
text-align: center;
color: var(--color-key);
font-size:min(3vw,14px);
line-height: 1.3;
display: block;
transition: all 0.2s ease;
}
.tab_item:hover {
opacity: 0.75;
}
.tabs input#mikeiken + .tab_item{
border-left:solid 1px var(--color-key);
background: url("../images/question/faq_icon1.png") center 3px /auto 25px no-repeat;
}
.tabs input#keikensya + .tab_item{
background:url("../images/question/faq_icon2.png") center 5px / auto 20px no-repeat;
}
.tabs input#mensetsu + .tab_item{
background:url("../images/question/faq_icon3.png") center 4px / auto 23px no-repeat;
}
.tabs input#taigu + .tab_item{
background:url("../images/question/faq_icon4.png") center 3px / auto 25px no-repeat;
}
.tabs input#zeikin + .tab_item{
padding-top:clamp(35px,10vw,40px);
background:url("../images/question/faq_icon5.png") center 4px / auto 23px no-repeat;
}
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
color: #fff;
}
.tabs input#mikeiken:checked + .tab_item{
background:var(--color-key) url("../images/question/faq_icon1_w.png") center 3px /auto 25px no-repeat;
}
.tabs input#keikensya:checked + .tab_item{
background:var(--color-key) url("../images/question/faq_icon2_w.png") center 5px / auto 20px no-repeat;
}
.tabs input#mensetsu:checked + .tab_item{
background:var(--color-key) url("../images/question/faq_icon3_w.png") center 4px / auto 23px no-repeat;
}
.tabs input#taigu:checked + .tab_item{
background:var(--color-key) url("../images/question/faq_icon4_w.png") center 3px / auto 25px no-repeat;
}
.tabs input#zeikin:checked + .tab_item{
background:var(--color-key) url("../images/question/faq_icon5_w.png") center 4px / auto 23px no-repeat;
}
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_content {
padding-top:var(--space-l);
display: none;
clear: both;
overflow: hidden;
}
/*選択されているタブのコンテンツのみを表示*/
#mikeiken:checked ~ #mikeiken_content,
#keikensya:checked ~ #keikensya_content,
#mensetsu:checked ~ #mensetsu_content,
#taigu:checked ~ #taigu_content,
#zeikin:checked ~ #zeikin_content{
display: block;
}
/*--------------アリスイズム-----------------*/
#aliceism #subimage .sub-top{
background: url("../images/aliceism/subimage.png") center bottom /cover no-repeat;
}
#aliceism04 figure{
padding: 0 20%;
}
/*--------------スタッフ紹介-----------------*/
#recruit #subimage .sub-top{
background: url("../images/staff/subimage.png") center bottom /cover no-repeat;
}
#recruit .box01{
padding: var(--space-sm);
background: #ffeae1;
}
#recruit .jinzai{
position: relative;
}
#recruit .jinzai::before{
content: " ";
position: absolute;
left: 0;
top:0;
width: 100%;
height: 90%;
z-index: 1;
background: url("../images/common/bg03.png");
background-size:100%;
}
/*--------------お問い合わせページ-----------------*/
#mail #subimage .sub-top, #mail_thank #subimage .sub-top{
background: url("../images/contact/subimage.png") center bottom /cover no-repeat;
}
#mail #subimage,#mail_thank #subimage{
position: relative;
}
#mail #subimage::after,#mail_thank #subimage::after{
content: " ";
width: 100%;
height:50%;
position: absolute;
left: 0;
bottom:0;
background: url("../images/contact/subimage2.png") center center / 100% no-repeat;
z-index: 1;
}
/*--------------プライバシーポリシーページ-----------------*/
#privacy #subimage .sub-top{
background: url("../images/common/subimage_privacy.png") center bottom /cover no-repeat;
}
/*--------------会社概要ページ-----------------*/
#company #subimage .sub-top{
background: url("../images/common/subimage_company.png") center bottom /cover no-repeat;
}
#company .table01 th{
border-right:none;
}
/*--------------404ページ-----------------*/
#error #subimage .sub-top{
background: url("../images/common/subimage_404.png") center bottom /cover no-repeat;
}
/* =========================
エリアページ
========================= */
#arealist ul{
display: flex;
}
#arealist ul li{
width:20%;
background: #fff;
}
#arealist ul li a{
width: 100%;
height: 100%;
padding:34px 0 5px;
border-right:solid 1px var(--color-key);
display: block;
text-align: center;
font-size:min(2.8vw,16px);
color: var(--color-key);
line-height: 1.4;
}
#arealist ul li.small a{
font-size:min(2.6vw,14px);
}
#arealist ul li:last-of-type a{
border-right:none;
}
#arealist ul li.insta a{
background: #fff url("../images/area/area_list1.png") center top 5px / 22px no-repeat;
}
#arealist ul li.room a{
background: #fff url("../images/area/area_list2.png") center top 5px / 25px no-repeat;
}
#arealist ul li.douki a{
background: #fff url("../images/area/area_list3.png") center top 9px / 22px no-repeat;
}
#arealist ul li.manager a{
background: #fff url("../images/area/area_list4.png") center top 4px / 17px no-repeat;
}
#arealist ul li.docu a{
padding-top: 41px;
background: #fff url("../images/area/area_list5.png") center top 8px / 18px no-repeat;
}
#arealist ul.four li{
width: 25%;
}
#arealist ul.four li a{
padding-top: 41px;
}
#arealist ul.four li.room a{
background-position: center top 7px;
}
#arealist ul.four li.douki a{
background: #fff url("../images/area/area_list3.png") center top 8px / 26px no-repeat;
}
#arealist ul.four li.manager a{
background: #fff url("../images/area/area_list4.png") center top 5px / 19px no-repeat;
}
#arealist ul.six li{
width: 16.6%;
}
#arealist ul.six li a{
padding-bottom: 5px;
}
#arealist ul.six li.insta a{
padding-top:30px;
line-height: 1.1;
background-position: center top 7px;
background-size:19px
}
#arealist ul.six li.room a{
padding-top: 38px;
background-position: center top 8px;
}
#arealist ul.six li.douki a{
padding-top: 30px;
line-height: 1.1;
background-position: center top 7px;
}
#arealist ul.six li.douki.single a{
padding-top: 37.5px;
line-height: inherit;
background-position: center top 10px;
background-size:24px;
}
#arealist ul.six li.manager a{
padding-top: 38px;
background-position: center top 7px;
}
#arealist ul.six li.docu a{
padding-top: 38px;
}
#arealist li.current a{
pointer-events: none;
cursor: default;
}
#arealist li.current{
opacity: .9;
}
.access{
padding: 0 38%;
}
#tokyo_03 .prev-arrow,#tokyo_03 .next-arrow,#tokyo5_02 .prev-arrow,#tokyo5_02 .next-arrow,#kagoshima_03 .prev-arrow,#kagoshima_03 .next-arrow{
top:20%;
}
/*-------------札幌----------------*/
#sapporo #subimage .sub-top, #sapporo1 #subimage .sub-top, #sapporo2 #subimage .sub-top, #sapporo3 #subimage .sub-top, #sapporo4 #subimage .sub-top{
background: url("../images/area/sapporo/subimage.png") center bottom /cover no-repeat;
}
#sapporo1 #subimage .sub-top::before,#sapporo2 #subimage .sub-top::before,#sapporo3 #subimage .sub-top::before,#sapporo4 #subimage .sub-top::before{
content: " ";
width: 30%;
height: 100px;
position: absolute;
left: 50%;
top:35%;
transform: translateX(-50%);
background: url("../images/area/sapporo/sapproarea.png") center top / 100% no-repeat;
z-index: 2;
}
#sapporo_02 .en{
margin-top: -20px;
padding: 0 30%;
}
#sapporo_04 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:32%;
height:8em;
}
#sapporo_04 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:32%;
height:8em;
}
#sapporo1_02 .en01{
width: 60%;
}
#sapporo1_02 .comment1{
padding-inline:20%;
}
#sapporo1_03 .ulstyle07 li:first-of-type{
background: url("../images/area/sapporo/kodawari_ttl1.png") right 3% top / 7% no-repeat;
}
#sapporo1_03 .ulstyle07 li:nth-of-type(2){
background: url("../images/area/sapporo/kodawari_ttl2.png") left 3% top / 7% no-repeat;
}
#sapporo1_03 .ulstyle07 li:nth-of-type(3){
background: url("../images/area/sapporo/kodawari_ttl3.png") right 3% top / 7% no-repeat;
}
#sapporo2_02 h2{
margin-top: -30px;
padding-inline:10%;
}
#sapporo2_02 ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#sapporo2_02 ul li{
width: 48%;
margin-bottom:15px;
}
#sapporo2_02 ul li:first-of-type{
width: 100%;
}
#sapporo2_03 .bg04 .en01{
width: 60%;
}
#sapporo2_03 .modelcase .box .girl{
top:-7%;
height: 155px;
}
#sapporo2_03 .modelcase .box{
padding-right: 3%;
padding-left: 33%;
}
#sapporo2_03 .modelcase .inner{
padding-top: 20px;
}
.reviews .case-dl1{
align-items: flex-start;
}
.reviews .case-dl1 dt{
padding-block: 5px;
background: #fff;
color: var(--color-key);
border:solid 1px var(--color-key);
line-height: 1.2;
text-align: center;
font-size:min(3.5vw,18px);
}
.reviews .prev-arrow,.reviews .next-arrow{
top:20%;
}
#sapporo2_04 .why{
padding: 0 40%;
}
.ulstyle01.areaslider li .text{
padding: 0;
}
#sapporo2_04 .ulstyle01 .hstyle05{
text-align: left;
}
#sapporo2_04 .ulstyle01{
overflow: hidden;
}
#sapporo04_03 .en01{
width: 100%;
}
#sapporo04_03 .ttl1{
padding: 0 25%;
}
#sapporo04_03 .ulstyle01 li .photo{
position: relative;
}
#sapporo04_03 .ulstyle01 li .photo img{
margin: 0 auto;
width: 150px;
}
#sapporo04_03 .ulstyle01 li .photo figcaption{
position: absolute;
top:0;
left: 50%;
transform: translateX(-80px);
font-size:min(9vw,40px);
color: #fff;
text-shadow :
1px 1px 0px var(--color-key),
-1px 1px 0px var(--color-key),
1px -1px 0px var(--color-key),
-1px -1px 0px var(--color-key),
1px 0px 0px var(--color-key),
0px 1px 0px var(--color-key),
-1px 0px 0px var(--color-key),
0px -1px 0px var(--color-key);
font-weight: bold;
font-family: var(--font);
}
/*-------------仙台----------------*/
#sendai #subimage .sub-top,#sendai3 #subimage .sub-top, #sendai4 #subimage .sub-top, #sendai5 #subimage .sub-top{
background: url("../images/area/sendai/subimage.png") center bottom /cover no-repeat;
}
#sendai1 #subimage .sub-top{
background: url("../images/area/sendai/subimage_higashi.png") center bottom /cover no-repeat;
}
#sendai2 #subimage .sub-top{
background: url("../images/area/sendai/subimage_hirose.png") center bottom /cover no-repeat;
}
#sendai1 #subimage .sub-top::before,#sendai2 #subimage .sub-top::before,#sendai3 #subimage .sub-top::before,#sendai4 #subimage .sub-top::before,#sendai5 #subimage .sub-top::before{
content: " ";
width: 30%;
height: 100px;
position: absolute;
left: 50%;
top:35%;
transform: translateX(-50%);
background: url("../images/area/sendai/sendaiarea.png") center top / 100% no-repeat;
z-index: 2;
}
#sendai_01 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:32%;
height:8em;
}
#sendai_01 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:32%;
height:2em;
}
.ulstyle02 .shopname{
font-size:min(5.5vw,30px);
}
#sendai_01 .ulstyle02 li:first-of-type .shopname{
padding-left: 4%;
}
#sendai_01 .ulstyle02 li:nth-of-type(2) .shopname{
padding-right: 4%;
}
#sendai_03 .modelcase .en01{
width: 65%;
}
#sendai_03 .prev-arrow,#sendai_03 .next-arrow{
top:20%;
}
#sendai_04 .voice{
padding: 0 35%;
}
#sendai_05 h2{
padding: 0 5%;
}
#sendai1_02 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:32%;
height:2em;
}
#sendai1_02 .ulstyle02 li:nth-of-type(3) .text .dummy{
float:right;
width:32%;
height:1em;
}
#sendai1_03 .en01,#sendai2_03 .en01{
width: 65%;
}
#sendai1_04 .en,#sendai2_04 .en{
margin-top: -20px;
padding: 0 30%;
}
#sendai1_05 .voice,#sendai2_05 .voice{
padding: 0 20%;
}
#sendai2_02 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:32%;
height:1em;
}
#sendai2_02 .ulstyle02 li:nth-of-type(3) .text .dummy{
float:right;
width:32%;
height:4em;
}
#sendai4 #subimage .sub-bottom p{
line-height: 1.5;
}
/*-------------東京----------------*/
#tokyo #subimage .sub-top,#tokyo3 #subimage .sub-top, #tokyo4 #subimage .sub-top, #tokyo5 #subimage .sub-top{
background: url("../images/area/tokyo/subimage.png") center bottom /cover no-repeat;
}
#tokyo1 #subimage .sub-top{
background: url("../images/area/tokyo/subimage_shinjuku.png") center bottom /cover no-repeat;
}
#tokyo2 #subimage .sub-top{
background: url("../images/area/tokyo/subimage_kinshicho.png") center bottom /cover no-repeat;
}
#tokyo1 #subimage .sub-top::before,#tokyo2 #subimage .sub-top::before,#tokyo3 #subimage .sub-top::before,#tokyo4 #subimage .sub-top::before,#tokyo5 #subimage .sub-top::before{
content: " ";
width: 30%;
height: 100px;
position: absolute;
left: 50%;
top:35%;
transform: translateX(-50%);
background: url("../images/area/tokyo/tokyoarea.png") center top / 100% no-repeat;
z-index: 2;
}
#tokyo_01 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:32%;
height:8em;
}
#tokyo_01 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:32%;
height:4em;
}
#tokyo_01 .ulstyle02 li:first-of-type .shopname{
padding-left: 4%;
}
#tokyo_01 .ulstyle02 li:nth-of-type(2) .shopname{
padding-right: 4%;
}
#tokyo_02 .t02_ttl{
padding: 0 15%;
}
#tokyo_03 .en01{
width: 50%;
}
#tokyo_04 .hstyle01{
margin-top: -15px;
}
#tokyo1_03 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:32%;
height:6em;
}
#tokyo1_03 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:32%;
height:12em;
}
#tokyo1_03 .ulstyle02 li .boxstyle03{
margin-inline:var(--space-xs);
}
.map{
padding-left: 25px;
background: url("../images/area/tokyo/icon02.png") left center / 15px no-repeat;
}
#tokyo1_04 .text1{
padding: 0 15%;
}
#tokyo2_03 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:32%;
height:11em;
}
#tokyo2_03 .ulstyle02 li:first-of-type p:first-of-type{
margin-right:30%;
}
#tokyo2_03 .ulstyle02 li:first-of-type p:last-of-type{
margin-right:40%;
}
#tokyo2_03 .ulstyle02 li:first-of-type .img01{
position: absolute;
right:3%;
bottom:5%;
width: 33%;
}
#tokyo2_03 .map{
font-size:min(3.3vw,16px);
}
.comment-box figure{
width:20%;
}
.comment-box .text{
width: 75%;
}
.comment-box .hstyle05{
font-size:min(4.4vw,22px);
}
/*-------------小倉---------------*/
#kitakyushu #subimage .sub-top,#kitakyushu1 #subimage .sub-top,#kitakyushu2 #subimage .sub-top,#kitakyushu3 #subimage .sub-top,#kitakyushu4 #subimage .sub-top{
background: url("../images/area/kitakyusyu/subimage.png") center bottom /cover no-repeat;
}
#kitakyushu1 #subimage .sub-top::before,#kitakyushu2 #subimage .sub-top::before,#kitakyushu3 #subimage .sub-top::before,#kitakyushu4 #subimage .sub-top::before{
content: " ";
width: 35%;
height: 100px;
position: absolute;
left: 50%;
top:35%;
transform: translateX(-50%);
background: url("../images/area/kitakyusyu/kitakyusyuarea.png") center top / 100% no-repeat;
z-index: 2;
}
#kitakyusyu_04.bg04 .en01{
width: 60%;
}
#kitakyusyu1_02 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:32%;
height:6em;
}
#kitakyusyu1_02 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:32%;
height:8em;
}
#kitakyusyu1_03 .ulstyle07 li:first-of-type{
background: url("../images/area/kitakyusyu/kitakyusyu1_bg01.png") right 3% top / 7% no-repeat;
}
#kitakyusyu1_03 .ulstyle07 li:nth-of-type(2){
background: url("../images/area/kitakyusyu/kitakyusyu1_bg02.png") left 3% top / 7% no-repeat;
}
#kitakyusyu1_03 .ulstyle07 li:nth-of-type(3){
background: url("../images/area/kitakyusyu/kitakyusyu1_bg03.png") right 3% top / 7% no-repeat;
}
#kitakyusyu1_04 .en{
margin-top: -20px;
padding: 0 20%;
}
#kitakyusyu1_05 .en01{
width: 65%;
}
#kitakyusyu4_03 .en01{
width: 42%;
}
#kitakyusyu4_03 .comment{
padding: 0 20%;
}
#kitakyusyu4_04 .comment{
padding: 0 20%;
}
/*-------------広島---------------*/
#hiroshima #subimage .sub-top,#hiroshima1 #subimage .sub-top,#hiroshima2 #subimage .sub-top,#hiroshima3 #subimage .sub-top,#hiroshima4 #subimage .sub-top{
background: url("../images/area/hiroshima/subimage.png") center bottom /cover no-repeat;
}
#hiroshima1 #subimage .sub-top::before,#hiroshima2 #subimage .sub-top::before,#hiroshima3 #subimage .sub-top::before,#hiroshima4 #subimage .sub-top::before{
content: " ";
width: 35%;
height: 100px;
position: absolute;
left: 50%;
top:35%;
transform: translateX(-50%);
background: url("../images/area/hiroshima/hiroshimaarea.png") center top / 100% no-repeat;
z-index: 2;
}
#hiroshima_02 .ulstyle07 li:first-of-type{
background: url("../images/area/hiroshima/hiroshima_bg01.png") right 3% top / 7% no-repeat;
}
#hiroshima_02 .ulstyle07 li:nth-of-type(2){
background: url("../images/area/hiroshima/hiroshima_bg02.png") left 3% top / 7% no-repeat;
}
#hiroshima_02 .ulstyle07 li:nth-of-type(3){
background: url("../images/area/hiroshima/hiroshima_bg03.png") right 3% top / 7% no-repeat;
}
#hiroshima_02 .ulstyle07 li:nth-of-type(4){
background: url("../images/area/hiroshima/hiroshima_bg04.png") left 3% top / 7% no-repeat;
}
.hiroshima_03_text1,.hiroshima_03_text2{
position: relative;
}
.hiroshima_03_text1 .dummy{
float:left;
width:50%;
height:11em;
}
.hiroshima_03_text2 .dummy{
float:right;
width:50%;
height:11em;
}
.hiroshima_03_text1 img{
position: absolute;
left:0;
top:0;
width: 46%;
}
.hiroshima_03_text2 img{
position: absolute;
right:0;
top:0;
width: 46%;
}
#hiroshima_04 .en01{
width: 50%;
}
#hiroshima1_02 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:32%;
height:3em;
}
#hiroshima1_02 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:32%;
height:8em;
}
#hiroshima1_03 .ulstyle07 li:first-of-type{
background: url("../images/area/hiroshima/hiroshima1_bg01.png") right 3% top / 7% no-repeat;
}
#hiroshima1_03 .ulstyle07 li:nth-of-type(2){
background: url("../images/area/hiroshima/hiroshima1_bg02.png") left 3% top / 7% no-repeat;
}
#hiroshima1_03 .ulstyle07 li:nth-of-type(3){
background: url("../images/area/hiroshima/hiroshima1_bg03.png") right 3% top / 7% no-repeat;
}
#hiroshima1_04 .en{
margin-top: -20px;
padding: 0 20%;
}
.shop-file{
position: relative;
padding-top: var(--space-sm);
background: url("../images/flow/flow_bg3.png") center top / 100% no-repeat;
}
.shop-file .filettl {
position: relative;
}
.shop-file .filettl .photo{
width: 55%;
}
.shop-file .filettl .text{
width: 45%;
height:20em;
position: absolute;
right:0;
top:0;
display: flex;
justify-content: center;
}
.shop-file#hiroshima2_03 .filettl .photo,.shop-file#hiroshima2_05 .filettl .photo{
margin-left: 45%;
}
.shop-file#hiroshima2_03 .filettl .text,.shop-file#hiroshima2_05 .filettl .text{
right: inherit;
left:0;
}
.shop-file .filettl .text .ttl1{
font-family: var(--font);
font-size:min(5vw,24px);
writing-mode: vertical-rl;
text-shadow :
1px 1px 0px #ffffff,
-1px 1px 0px #ffffff,
1px -1px 0px #ffffff,
-1px -1px 0px #ffffff,
1px 0px 0px #ffffff,
0px 1px 0px #ffffff,
-1px 0px 0px #ffffff,
0px -1px 0px #ffffff;
line-height: 2;
}
.shop-file figure img{
width: min(28vw,170px);
}
.shop-file .fileno{
position: absolute;
left:0;
top:0;
text-align: center;
font-size:80%;
font-weight: bold;
line-height: 1;
}
.shop-file#hiroshima2_03 .fileno,.shop-file#hiroshima2_05 .fileno{
left: inherit;
right:0;
}
.shop-file .fileno .no{
font-size:min(7vw,32px);
color: #fff;
text-shadow :
1px 1px 0px var(--color-key),
-1px 1px 0px var(--color-key),
1px -1px 0px var(--color-key),
-1px -1px 0px var(--color-key),
1px 0px 0px var(--color-key),
0px 1px 0px var(--color-key),
-1px 0px 0px var(--color-key),
0px -1px 0px var(--color-key);
}
#hiroshima4_03 .en01{
width: 40%;
}
#hiroshima4_03 .ulstyle01 li .photo{
position: relative;
}
#hiroshima4_03 .ulstyle01 li .photo img{
margin: 0 auto;
width: 150px;
}
#hiroshima4_03 .ulstyle01 li .photo figcaption{
position: absolute;
top:0;
left: 50%;
transform: translateX(-80px);
font-size:min(9vw,40px);
color: #fff;
text-shadow :
1px 1px 0px var(--color-key),
-1px 1px 0px var(--color-key),
1px -1px 0px var(--color-key),
-1px -1px 0px var(--color-key),
1px 0px 0px var(--color-key),
0px 1px 0px var(--color-key),
-1px 0px 0px var(--color-key),
0px -1px 0px var(--color-key);
font-weight: bold;
font-family: var(--font);
}
/*-------------愛媛---------------*/
#ehime #subimage .sub-top,#ehime1 #subimage .sub-top,#ehime2 #subimage .sub-top,#ehime3 #subimage .sub-top,#ehime4 #subimage .sub-top{
background: url("../images/area/ehime/subimage.png") center bottom /cover no-repeat;
}
#ehime1 #subimage .sub-top::before,#ehime2 #subimage .sub-top::before,#ehime3 #subimage .sub-top::before,#ehime4 #subimage .sub-top::before{
content: " ";
width: 30%;
height: 100px;
position: absolute;
left: 50%;
top:35%;
transform: translateX(-50%);
background: url("../images/area/ehime/ehimearea.png") center top / 100% no-repeat;
z-index: 2;
}
#ehime_04 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:32%;
height:3em;
}
#ehime_04 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:32%;
height:3em;
}
#ehime_04 .ulstyle02 li:nth-of-type(3) .text .dummy{
float:right;
width:32%;
height:4em;
}
#ehime_04 .ulstyle02 li:nth-of-type(4) .text .dummy{
float:left;
width:32%;
height:6em;
}
#ehime_04 .ulstyle02 li:nth-of-type(5) .text .dummy{
float:right;
width:32%;
height:8em;
}
#ehime_05 .en01{
width: 55%;
}
#ehime1_02 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:32%;
height:3em;
}
#ehime1_02 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:32%;
height:4em;
}
#ehime1_02 .ulstyle02 li:nth-of-type(3) .text .dummy{
float:right;
width:32%;
height:8em;
}
#ehime1_02 .ulstyle02 li:nth-of-type(4) .text .dummy{
float:left;
width:32%;
height:6em;
}
#ehime1_03 .en01{
width: 40%;
}
#ehime1_03 .prev-arrow,#ehime1_03 .next-arrow{
top:20%;
}
#ehime1_03 .slider-bg::before{
top:22%;
}
#ehime4_03 .en01{
width: 38%;
}
#ehime4_03 .ulstyle01 li .photo{
position: relative;
}
#ehime4_03 .ulstyle01 li .photo img{
margin: 0 auto;
width: 150px;
}
#ehime4_03 .ulstyle01 li .photo figcaption{
position: absolute;
top:0;
left: 50%;
transform: translateX(-80px);
font-size:min(9vw,40px);
color: #fff;
text-shadow :
1px 1px 0px var(--color-key),
-1px 1px 0px var(--color-key),
1px -1px 0px var(--color-key),
-1px -1px 0px var(--color-key),
1px 0px 0px var(--color-key),
0px 1px 0px var(--color-key),
-1px 0px 0px var(--color-key),
0px -1px 0px var(--color-key);
font-weight: bold;
font-family: var(--font);
}
/*-------------福岡---------------*/
#fukuoka #subimage .sub-top,#fukuoka4 #subimage .sub-top,#fukuoka5 #subimage .sub-top,#fukuoka6 #subimage .sub-top{
background: url("../images/area/fukuoka/subimage.png") center bottom /cover no-repeat;
}
#fukuoka1 #subimage .sub-top{
background: url("../images/area/fukuoka/subimage1.png") center bottom /cover no-repeat;
}
#fukuoka2 #subimage .sub-top{
background: url("../images/area/fukuoka/subimage2.png") center bottom /cover no-repeat;
}
#fukuoka3 #subimage .sub-top{
background: url("../images/area/fukuoka/subimage3.png") center bottom /cover no-repeat;
}
#fukuoka1 #subimage .sub-top::before,#fukuoka2 #subimage .sub-top::before,#fukuoka3 #subimage .sub-top::before,#fukuoka4 #subimage .sub-top::before,#fukuoka5 #subimage .sub-top::before,#fukuoka6 #subimage .sub-top::before{
content: " ";
width: 35%;
height: 100px;
position: absolute;
left: 50%;
top:35%;
transform: translateX(-50%);
background: url("../images/area/fukuoka/fukuokaarea.png") center top / 100% no-repeat;
z-index: 2;
}
#fukuoka_01 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:32%;
height:5em;
}
#fukuoka_01 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:32%;
height:8em;
}
#fukuoka_01 .ulstyle02 li:nth-of-type(3) .text .dummy{
float:right;
width:32%;
height:10em;
}
#fukuoka_01 .ulstyle02 li:first-of-type .shopname,#fukuoka_01 .ulstyle02 li:nth-of-type(3) .shopname{
padding-left: 4%;
}
#fukuoka_01 .ulstyle02 li:nth-of-type(2) .shopname{
padding-right: 4%;
}
#fukuoka_01 .recommend{
position: relative;
padding: min(13vw,70px) min(3vw,20px) min(5vw,30px) min(10vw,50px);
background: url("../images/area/fukuoka/check_bg.png") center top / 100% no-repeat;
}
#fukuoka_01 .recommend .recommendttl{
position: absolute;
left: -5px;
top:-7px;
width: 48%;
}
#fukuoka_01 .recommend li{
background: url("../images/common/check.png") left top 4px / 14px no-repeat;
padding-top: 0;
padding-left: 20px;
font-size:min(4vw,18px);
}
#fukuoka_02 .t02_ttl{
padding: 0 15%;
}
#fukuoka_03 .en01{
width: 60%;
}
.taglist{
display: flex;
flex-wrap: wrap;
gap:5px;
}
.taglist li{
padding: 1px 5px;
border:solid 1px var(--color-key);
background: #fff;
font-size:min(3vw,14px);
color:var(--color-key);
}
#fukuoka_03 .prev-arrow,#fukuoka_03 .next-arrow{
top:22%;
}
#fukuoka_03 dl{
display: flex;
justify-content: space-between;
align-items: center;
}
#fukuoka_03 dl dt{
width:20%;
}
#fukuoka_03 dl dd{
width: 78%;
}
#fukuoka_04 .hstyle01{
margin-top: -15px;
}
#fukuoka1_02 .ulstyle07 li:first-of-type{
background: url("../images/area/fukuoka/fukuoka1_bg01.png") right 3% top / 7% no-repeat;
}
#fukuoka1_02 .ulstyle07 li:nth-of-type(2){
background: url("../images/area/fukuoka/fukuoka1_bg02.png") left 3% top / 7% no-repeat;
}
#fukuoka1_02 .ulstyle07 li:nth-of-type(3){
background: url("../images/area/fukuoka/fukuoka1_bg03.png") right 3% top / 7% no-repeat;
}
#fukuoka1_03 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:44%;
height:3em;
}
#fukuoka1_03 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:44%;
height:3em;
}
#fukuoka1_03 .ulstyle02 li:nth-of-type(3) .text .dummy{
float:right;
width:44%;
height:3em;
}
#fukuoka1_03 .ulstyle02 li:nth-of-type(4) .text .dummy{
float:left;
width:44%;
height:3em;
}
#fukuoka2_03 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:44%;
height:4em;
}
#fukuoka2_03 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:44%;
height:4em;
}
#fukuoka2_03 .ulstyle02 li:nth-of-type(3) .text .dummy{
float:right;
width:44%;
height:4em;
}
#fukuoka2_02 .ulstyle07 li:first-of-type{
background: url("../images/area/fukuoka/fukuoka2_bg01.png") right 3% top / 7% no-repeat;
}
#fukuoka2_02 .ulstyle07 li:nth-of-type(2){
background: url("../images/area/fukuoka/fukuoka2_bg02.png") left 3% top / 7% no-repeat;
}
#fukuoka2_02 .ulstyle07 li:nth-of-type(3){
background: url("../images/area/fukuoka/fukuoka2_bg03.png") right 3% top / 7% no-repeat;
}
#fukuoka2_02 .ulstyle07 li:nth-of-type(4){
background: url("../images/area/fukuoka/fukuoka2_bg04.png") left 3% top / 7% no-repeat;
}
#fukuoka2_04 .ulstyle01.point01 li.inner{
padding-top: 20px;
}
#fukuoka2_04 .ulstyle01.point01 li.inner .job{
font-size:min(3vw,16px);
}
#fukuoka3_02 .ulstyle07 li:first-of-type{
background: url("../images/area/fukuoka/fukuoka3_bg01.png") right 3% top / 7% no-repeat;
}
#fukuoka3_02 .ulstyle07 li:nth-of-type(2){
background: url("../images/area/fukuoka/fukuoka3_bg02.png") left 3% top / 7% no-repeat;
}
#fukuoka3_02 .ulstyle07 li:nth-of-type(3){
background: url("../images/area/fukuoka/fukuoka3_bg03.png") right 3% top / 7% no-repeat;
}
#fukuoka3_02 .ulstyle07 li:nth-of-type(4){
background: url("../images/area/fukuoka/fukuoka3_bg04.png") left 3% top / 7% no-repeat;
}
#fukuoka3_03 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:32%;
height:18em;
}
#fukuoka3_03 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:32%;
height:9em;
}
#fukuoka3_03 .ulstyle02 li:first-of-type .photo01{
width: 32%;
position: absolute;
right:0;
top:min(108vw,520px);
}
#fukuoka5 .f-maru .span04{
font-size:min(4.4vw,20px);
}
/*-------------熊本---------------*/
#kumamoto #subimage .sub-top,#kumamoto1 #subimage .sub-top,#kumamoto2 #subimage .sub-top,#kumamoto3 #subimage .sub-top,#kumamoto4 #subimage .sub-top{
background: url("../images/area/kumamoto/subimage.png") center bottom /cover no-repeat;
}
#kumamoto1 #subimage .sub-top::before,#kumamoto2 #subimage .sub-top::before,#kumamoto3 #subimage .sub-top::before,#kumamoto4 #subimage .sub-top::before{
content: " ";
width: 30%;
height: 100px;
position: absolute;
left: 50%;
top:35%;
transform: translateX(-50%);
background: url("../images/area/kumamoto/kumamotoarea.png") center top / 100% no-repeat;
z-index: 2;
}
#kumamoto_04 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:32%;
height:5em;
}
#kumamoto_04 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:32%;
height:1em;
}
#kumamoto_04 .ulstyle02 li:nth-of-type(4) .text .dummy{
float:left;
width:32%;
height:3em;
}
#kumamoto_04 .ulstyle02 li:nth-of-type(5) .text .dummy{
float:right;
width:32%;
height:2em;
}
#kumamoto_05 .en01{
width: 75%;
}
#kumamoto1_03 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:32%;
height:8em;
}
#kumamoto1_03 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:32%;
height:1em;
}
#kumamoto1_03 .en01{
width:45%;
}
/*-------------長崎---------------*/
#nagasaki #subimage .sub-top,#nagasaki1 #subimage .sub-top,#nagasaki2 #subimage .sub-top,#nagasaki3 #subimage .sub-top,#nagasaki4 #subimage .sub-top{
background: url("../images/area/nagasaki/subimage.png") center bottom /cover no-repeat;
}
#nagasaki1 #subimage .sub-top::before,#nagasaki2 #subimage .sub-top::before,#nagasaki3 #subimage .sub-top::before,#nagasaki4 #subimage .sub-top::before{
content: " ";
width: 30%;
height: 100px;
position: absolute;
left: 50%;
top:35%;
transform: translateX(-50%);
background: url("../images/area/nagasaki/nagasakiarea.png") center top / 100% no-repeat;
z-index: 2;
}
#nagasaki1_02 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:32%;
height:5em;
}
#nagasaki1_02 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:32%;
height:5em;
}
#nagasaki1_03 .ulstyle07 li:first-of-type{
background: url("../images/area/nagasaki/nagasaki1_bg01.png") right 3% top / 7% no-repeat;
}
#nagasaki1_03 .ulstyle07 li:nth-of-type(2){
background: url("../images/area/nagasaki/nagasaki1_bg02.png") left 3% top / 7% no-repeat;
}
#nagasaki1_03 .ulstyle07 li:nth-of-type(3){
background: url("../images/area/nagasaki/nagasaki1_bg03.png") right 3% top / 7% no-repeat;
}
#nagasaki1_04 .en{
margin-top: -20px;
padding: 0 20%;
}
/*-------------大分---------------*/
#oita #subimage .sub-top,#oita1 #subimage .sub-top,#oita2 #subimage .sub-top,#oita3 #subimage .sub-top,#oita4 #subimage .sub-top{
background: url("../images/area/oita/subimage.png") center bottom /cover no-repeat;
}
#oita1 #subimage .sub-top::before,#oita2 #subimage .sub-top::before,#oita3 #subimage .sub-top::before,#oita4 #subimage .sub-top::before{
content: " ";
width: 30%;
height: 100px;
position: absolute;
left: 50%;
top:35%;
transform: translateX(-50%);
background: url("../images/area/oita/oitaarea.png") center top / 100% no-repeat;
z-index: 2;
}
#oita_04 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:32%;
height:6em;
}
#oita_04 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:32%;
height:6em;
}
#oita_04 .ulstyle02 li:nth-of-type(3) .text .dummy{
float:right;
width:32%;
height:9em;
}
#oita1_02 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:32%;
height:8em;
}
#oita1_02 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:32%;
height:8em;
}
#oita1_03 .ulstyle07 li:first-of-type{
background: url("../images/area/oita/oita1_bg01.png") right 3% top / 7% no-repeat;
}
#oita1_03 .ulstyle07 li:nth-of-type(2){
background: url("../images/area/oita/oita1_bg02.png") left 3% top / 7% no-repeat;
}
#oita1_03 .ulstyle07 li:nth-of-type(3){
background: url("../images/area/oita/oita1_bg03.png") right 3% top / 7% no-repeat;
}
/*-------------宮崎--------------*/
#miyazaki #subimage .sub-top,#miyazaki1 #subimage .sub-top,#miyazaki2 #subimage .sub-top,#miyazaki3 #subimage .sub-top,#miyazaki4 #subimage .sub-top{
background: url("../images/area/miyazaki/subimage.png") center bottom /cover no-repeat;
}
#miyazaki1 #subimage .sub-top::before,#miyazaki2 #subimage .sub-top::before,#miyazaki3 #subimage .sub-top::before,#miyazaki4 #subimage .sub-top::before{
content: " ";
width: 30%;
height: 100px;
position: absolute;
left: 50%;
top:35%;
transform: translateX(-50%);
background: url("../images/area/miyazaki/miyazakiarea.png") center top / 100% no-repeat;
z-index: 2;
}
#miyazaki_04 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:44%;
height:6em;
}
#miyazaki_04 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:44%;
height:5em;
}
#miyazaki_04 .ulstyle02 li:nth-of-type(3) .text .dummy{
float:right;
width:44%;
height:7em;
}
#miyazaki1_02 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:44%;
height:6em;
}
#miyazaki1_02 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:44%;
height:8em;
}
#miyazaki1_03 .ulstyle07 li:first-of-type{
background: url("../images/area/miyazaki/miyazaki1_bg01.png") right 3% top / 6% no-repeat;
}
#miyazaki1_03 .ulstyle07 li:nth-of-type(2){
background: url("../images/area/miyazaki/miyazaki1_bg02.png") left 3% top / 6% no-repeat;
}
#miyazaki1_03 .ulstyle07 li:nth-of-type(3){
background: url("../images/area/miyazaki/miyazaki1_bg03.png") right 3% top / 6% no-repeat;
}
/*-------------鹿児島----------------*/
#kagoshima #subimage .sub-top,#kagoshima3 #subimage .sub-top, #kagoshima4 #subimage .sub-top, #kagoshima5 #subimage .sub-top{
background: url("../images/area/kagoshima/subimage.png") center bottom /cover no-repeat;
}
#kagoshima1 #subimage .sub-top{
background: url("../images/area/kagoshima/subimage1.png") center bottom /cover no-repeat;
}
#kagoshima2 #subimage .sub-top{
background: url("../images/area/kagoshima/subimage2.png") center bottom /cover no-repeat;
}
#kagoshima1 #subimage .sub-top::before,#kagoshima2 #subimage .sub-top::before,#kagoshima3 #subimage .sub-top::before,#kagoshima4 #subimage .sub-top::before,#kagoshima5 #subimage .sub-top::before{
content: " ";
width: 30%;
height: 100px;
position: absolute;
left: 50%;
top:35%;
transform: translateX(-50%);
background: url("../images/area/kagoshima/kagoshimaarea.png") center top / 100% no-repeat;
z-index: 2;
}
#kagoshima_01 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:32%;
height:6em;
}
#kagoshima_01 .ulstyle02 li:first-of-type .shopname{
padding-left: 4%;
}
#kagoshima_01 .ulstyle02 li:nth-of-type(2) .shopname{
padding-right: 4%;
}
#kagoshima_02 .t02_ttl{
padding: 0 15%;
}
#kagoshima_03 .en01{
width: 70%;
}
#kagoshima_03 .link02 a{
font-size:min(3.9vw,18px);
}
#kagoshima_04 .hstyle01{
margin-top: -15px;
}
#kagoshima1_03 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:32%;
height:7em;
}
#kagoshima1_03 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:32%;
height:8em;
}
#kagoshima1_03 .map,#kagoshima2_03 .map{
font-size:min(3.5vw,18px);
}
#kagoshima1_03 .ulstyle02 li .boxstyle03{
margin-inline:var(--space-xs);
}
.k1_4_inner{
padding-top:40px;
position: relative;
}
.k1_4_inner .text1{
position: absolute;
top:0;
left: 0;
padding: 0 10%;
}
#kagoshima2_03 .ulstyle02 li:first-of-type .text .dummy{
float:right;
width:32%;
height:8em;
}
#kagoshima2_03 .ulstyle02 li:nth-of-type(2) .text .dummy{
float:left;
width:32%;
height:7em;
}
/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
320px以下
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●● */
@media (max-width: 320px) {
#experiences .modelcase .box .girl{
top:0;
left:0;
height: 200px;
}
#experiences .modelcase .box .girl.girl02,#experiences .modelcase .box .girl.girl05,#experiences .modelcase .box .girl.girl06,#experiences .modelcase .box .girl.girl10{
height:170px;
}
#experiences .modelcase .box .girl.girl04,#experiences .modelcase .box .girl.girl13{
height: 150px;
}
#experiences .modelcase .box .girl.girl08,#experiences .modelcase .box .girl.girl09,#experiences .modelcase .box .girl.girl11,#experiences .modelcase .box .girl.girl12,#experiences .modelcase .box .girl.girl15{
height: 180px;
}
#hiroshima h3.f-maru .span03{
font-size:4.5vw;
}
}
/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
↑spサイズ
----------------------------------
↓pcサイズ
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/
@media (min-width: 500px) {
#step .ulstyle01 li.inner p{
font-size:100%;
}
#step .en01{
top:-30px;
}
#flow02 .box02{
padding:30px 70px 100px;
}
#flow02 .en01 {
opacity: 0.4;
}
#step .en01{
opacity: 0.5;
}
.modelcase .box ol li dl dd span{
display: block;
}
#experiences .modelcase .box{
max-width: 400px;
margin-inline:auto;
}
#kitakyusyu4_04 .ulstyle01 li .text{
padding-inline:10%;
}
.hiroshima_03_text1 .dummy,.hiroshima_03_text2 .dummy{
height:13em;
}
#ehime4_03.bg04::after{
height: 300px;
bottom:-120px;
}
#ehime4_03 .slider3 li.inner2{
padding-inline:50px;
}
#fukuoka_01 .recommend .recommendttl{
left: -15px;
top:-15px;
}
#fukuoka_01 .recommend{
padding-bottom:25px;
background: #f9f8eb url("../images/area/fukuoka/check_bg2.png") left 10px top 10px / 20px repeat-y;
border:solid 2px #333;
}
}
@media (min-width: 1000px) {
#topimage{
padding-top: 10px;
}
}