@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-style: normal;
/*font: inherit;*/
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul, li {
list-style: none;
list-style-type: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input[type="text"],
input[type="password"],
textarea,
select,*:focus {
outline: none;
}
/*====================================================
////id common
====================================================*/
:root {
--color_1: #FF846E;
--color_2: #FFFCEF;
--color_3: #FFD1C9;
--color_4: #FFFF9B;
--color_5: #FFF562;
--color_6: #6A4632;
--red: #FF3936;
--l_gray: #efefef;
--gray: #e6e0e0;
--d_gray: #4c4948;
--black: #6A4632;
--font_family: 'Noto Sans JP', "Yu Gothic", "游ゴシック Medium", "YuGothic", "游ゴシック体", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}
html{
font-size: 10px;
font-size: 62.5%;
overflow-x : hidden;
width: 100%;
max-width: 100vw;
}
body, button, input, select, optgroup, textarea {
color: var(--black);
font-family: var(--font_family);
font-size: 16px;
font-size: 1.6rem;
font-weight: 500;
line-height: 1.6;
}
body {
background: #fff;
background-size: 250px;
}
button, input, select, optgroup, textarea {
color: inherit;
font-family: inherit;
font-size: inherit;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960px) {
body, button, input, select, optgroup, textarea {
font-size: min(4.2vw, 1.8rem);
line-height: 1.65;
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 960px) {
body, button, input, select, optgroup, textarea {
font-size: min(2.15vw, 2rem);
}
}
body {
position: relative;
width: 100%;
max-width: 100vw;
height: auto;
}
* {
min-height:0;
min-width : 0;
}
body * {
box-sizing: border-box;
}
section {
position: relative;
max-width: 100vw;
}
a {
display: inline-block;
transition: 0.2s ease-in-out;
color: inherit;
cursor: pointer;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
outline:none;
text-decoration: none;
/* vertical-align: middle; */
}
.tel_link a {
text-decoration: none !important;
}
a img {
transition: .1s ease-in-out;
}
.underline {
color: var(--mainColor);
-webkit-text-decoration: underline solid 1px currentColor;
text-decoration: underline solid 1px currentColor;
text-underline-position: under;
text-underline-offset: 0.05em;
}
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
display: block;
/* margin: auto; */
}
body figure {
margin: 0;
position: relative;
}
figure img {
position: relative;
}
.coverImg {
overflow: hidden;
padding-top: 75%;
width: 100%;
}
.coverImg img {
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: none;
height: 100%;
max-height: none;
}
.coverImg.contain img {
-o-object-fit: contain;
object-fit: contain;
}
.scaleUpImg {
overflow: hidden;
}
.scaleUpImg img {
transition: .4s;
}
.scaleUpImg:hover img {
transform: scale(1.05);
}
.round {
border-radius: 14px;
overflow: hidden;
}
hr {
border-top: solid 1px #CECECE;
margin: 0;
width: 100%;
height: 0;
}
hr.dot {
border-style: dotted;
}
#contents {
background-color: var(--color_1);
width: 100%;
position: relative;
transition: .2s ease-in-out;
z-index: 1;
}
.innerBox {
max-width: 974px;
margin: 0 auto;
padding: min(14vw, 60px) 0;
position: relative;
width: 94%;
z-index: 1;
}
.innerBox.shortPadding {
padding: 20px 0;
}
.block {display: block;}
.inb {display: inline-block;}
.relative { position: relative; z-index: 1;}
input[type="radio"], input[type="checkbox"] {
display: none;
}
.hidden {
display: none;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
#contents {
min-height: calc(100vh - 30vw - 12vw - 18px)
}
.innerBox {
width: 90%;
}
.hidden-mob {
display: none;
}
.flexColumn-mob ,
.flexColumn-tab {
flex-direction: column;
}
}
@media screen and (max-width:500px) {
.display-small {
display: block;
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
#contents {
min-height: calc(100vh - 280px - (78px + 7vw))
}
.hidden-pc, .hidden-pc_d-tab {
display: none;
}
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
#contents {
min-height: calc(100vh - (140px + 8vw) - (78px + 7vw));
}
.hidden-tab {
display: none;
}
.display-tab, .hidden-pc_d-tab {
display: block;
}
}
@media screen and (min-width:1040px) {
.hidden-wide {
display: none;
}
}
@media (hover: hover) {
a:hover {
opacity: .85;
}
}
/*====================================================
//NOTE テキスト
====================================================*/
.tate {
display: inline-block;
line-height: 1; /* iOSのズレを軽減 */
text-orientation: upright;
writing-mode: vertical-rl;
}
small, .small {
font-size: .8em;
}
.x-small {
font-size: .7em;
}
big, .big {
font-size: 1.2em;
}
strong {
font-weight: bold;
}
sup {
font-size: .5em;
vertical-align: .5em;
}
.fw-normal {
font-weight: 400;
}
.fw-medium {
font-weight: 500;
}
.fw-bold {
font-weight: 600;
}
.fw-black {
font-weight: 900;
}
.txt-left {
text-align: left;
}
.txt-justify {
text-align: justify;
}
.txt-right {
text-align: right;
}
.txt-center {
text-align: center;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.txt-center-pc {
text-align: center;
}
}
.lh-10 {line-height: 1.0;}
.lh-12 {line-height: 1.2;}
.lh-14 {line-height: 1.4;}
.lh-15 {line-height: 1.5;}
.lh-16 {line-height: 1.6;}
.lh-18 {line-height: 1.8;}
h1, h2, h3, h4, h5, h6 {
line-height: 1.4;
}
h1 {font-size: 3.3rem;}
h2 {font-size: 3.0rem;}
h3 {font-size: 2.8rem;}
h4 {font-size: 2.4rem;}
h5 {font-size: 2.2rem;}
@media screen and (max-width: 500px) {
h1 {font-size: 2.2em;}
h2 {font-size: 2.0em;}
h3 {font-size: 1.6em;}
h4 {font-size: 1.4em;}
h5 {font-size: 1.2em;}
}
/*====================================================
//NOTE 装飾系
====================================================*/
.arrow {
background: url('data:image/svg+xml;charset=UTF-8,') no-repeat center;
display: inline-block;
margin-left: .5em;
transition: transform .2s ease-in-out;
vertical-align: middle;
width: 1.5em;
height: 1.5em;
}
@media (hover: hover) {
a:hover .arrow {
transform: translateX(.3em);
}
}
dl.accordion dt ,
dl.menu-accordion dt {
cursor: pointer;
transition: .2s ease-in-out;
}
dl.accordion dd ,
dl.menu-accordion dd {
overflow: hidden;
transition: .2s ease-in-out;
}
ul.markList li {
line-height: 1.4;
position: relative;
padding-left: 1em;
margin: .3em 0;
}
ul.markList.dot li {
padding-left: 1em;
}
ul.markList.dot li::before {
background: currentColor;
border-radius: 100%;
content: '';
margin: auto;
position: absolute;
left: .3em;
top: .5em;
width: .3em;
height: .3em;
}
ul.markList > li:first-child {
margin-top: 0;
}
ul.markList > li:last-child {
margin-bottom: 0;
}
ul.markList li:before {
position: absolute;
display: block;
left: 0;
top: .05em;
}
ul.markList li:after {
display: none !important;
}
ul.markList.attentionMark {
line-height: 1.4;
}
ul.markList.attentionMark li:before {
content: '\203B';
}
ol{
counter-reset:number; /* 名前を付けたカウンターをリセット */
list-style:none; /* olが数字を付けることをキャンセル */
margin:0;
padding:0;
}
ol > li{
padding-left: 1.7em;
margin: .5em 0;
position: relative;
}
ol > li:first-child {
margin-top: 0;
}
ol > li:last-child {
margin-bottom: 0;
}
ol > li::before{
counter-increment: number;
content: counter(number)'.';
position: absolute;
top: .3em;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 1.7em;
height: 1.2em;
line-height: 1;
}
ol.brackets > li {
padding-left: 2em;
}
ol.brackets > li::before {
content: '（'counter(number)'）';
top: .25em;
}
.squareMark {
border-radius: 10px;
display: inline-block;
line-height: 1;
padding: .4em 1em;
vertical-align: .1em;
}
/*====================================================
//class .sa
====================================================*/
/*====================================================
//class .sa
====================================================*/
.sa {
opacity: 0;
}
.sa.show {
animation: .8s ease-in-out forwards sa-show;
}
.sa.slow.show {
animation: 1.2s ease-in-out forwards sa-show;
}
@keyframes sa-show {
to {
opacity: 1;
transform: none;
}
}
.sa.show_after {
opacity: 1;
transform: none;
transition: 0s;
}
.sa-lr {
transform: translate(-40px, 0);
}
.sa-rl {
transform: translate(40px, 0);
}
.sa-up {
transform: translate(0, 40px);
}
.sa-down {
transform: translate(0, -40px);
}
.sa-scaleUp {
transform: scale(.8);
}
.sa-scaleDown {
transform: scale(1.2);
}
.sa-rotateL {
transform: rotate(180deg);
}
.sa-rotateR {
transform: rotate(-180deg);
}
.sa.slideShow {
opacity: 1;
position: relative;
z-index: 1;
}
.sa.slideShow:before {
background: var(--l_pink);
content: '';
position: absolute;
top: 0;
left: 0;
right: auto;
transition: .5s ease-in-out;
width: 0;
height: 100%;
z-index: 10;
}
.sa.slideShow.show:before {
-webkit-animation: anim-slide 1.4s ease-in-out forwards;
animation: anim-slide 1.4s ease-in-out forwards;
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
@-webkit-keyframes anim-slide {
0% {}
55% { width: 100%; left: 0; right: 0;}
65% { width: 100%; left: auto; right: 0; }
100% { width: 0; left: auto; right: 0; }
}
@keyframes anim-slide {
0% {}
47% { width: 100%; left: 0; right: 0;}
53% { width: 100%; left: auto; right: 0; }
100% { width: 0; left: auto; right: 0; }
}
/*====================================================
////NOTE カラー
====================================================*/
.bg-white {
background: #fff;
color: var(--black);
}
.bg-1 {
background: var(--color_1);
}
.bg-2 {
background: var(--color_2);
}
.bg-3 {
background: var(--color_3);
}
.bg-4 {
background: var(--color_4);
}
.bg-red {
background: var(--red);
color: #fff;
}
.bg-l_gray {
background: var(--l_gray);
}
.bg-gray {
background: var(--gray);
color: #fff;
}
.bg-black {
background: var(--black);
color: #fff;
}
.white {
color: #fff;
}
.color-1 {
color: var(--color_1);
}
.color-2 {
color: var(--color_2);
}
.color-3 {
color: var(--color_3);
}
.color-4 {
color: var(--color_4);
}
.red {
color: var(--red);
}
.gray {
color: var(--gray);
}
.black {
color: var(--black);
}
.border-mainColor {
border: solid 2px var(--mainColor);
}
.border-red {
border: solid 2px var(--red);
}
.border-orange {
border: solid 2px var(--orange);
}
@media print, screen and (min-width: 769px) {
}
/*====================================================
////id 【header】
====================================================*/
header {
background-color: var(--color_2);
transition: .3s ease-in-out;
position: relative;
z-index: 999999;
}
header .headerBox {
border-top: solid 10px var(--color_1);
background-color: rgba(255, 252, 239, .8);
display: flex;
align-items: center;
justify-content: center;
}
header .header-inner {
display: flex;
align-items: center;
gap: 0 min(5vw, 30px);
margin: auto;
height: 100%;
width: 94%;
max-width: 1200px;
}
.header_logo {
display: flex;
align-items: center;
}
header img {
margin: 0;
}
header .menu-item {
display: flex;
justify-content: center;
}
header .menu-item > a {
display: grid;
place-content: center;
place-items: center;
padding: .2em;
position: relative;
width: min(10vw, 8em);
}
header .menu-item > a:hover {
opacity: 1;
}
header .menu-item.current > a {
opacity: 1;
pointer-events: none;
}
header .menu-item img {
margin-bottom: 5px;
width: 40px;
}
header .menu-item .en {
font-size: .625em;
}
header .menu-outer {
z-index: 30;
}
header .menuBtn {
border-radius: 100%;
cursor: pointer;
display: grid;
grid-template-rows: 1fr auto;
overflow: hidden;
transition: .3s ease-in-out;
width: 50px;
height: 50px;
z-index: 10;
}
header .menuBtn .humberger {
margin: 0;
position: relative;
transition: .3s ease-in-out;
width: 100%;
height: 100%;
}
header .menuBtn .humberger span {
background-color: var(--color_1);
border-radius: 10px;
content: '';
margin: auto;
opacity: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: .3s ease-in-out;
width: 26px;
height: 3px;
}
header .menuBtn .humberger span:nth-child(1) {
transform: translateY(-10px);
}
header .menuBtn .humberger span:nth-child(2) {
}
header .menuBtn .humberger span:nth-child(3) {
transform: translateY(10px);
}
header .menuBtn-text {
color: #fff;
font-size: min(2vw, 9px);
line-height: 1;
height: 1em;
pointer-events: none;
text-align: center;
transform: translateY(-.8em);
}
header + .maskBox {
background: transparent;
backdrop-filter: blur(2px) grayscale(50%);
opacity: 0;
pointer-events: none;
position: fixed;
top: 0;
left: 0;
transition: .3s ease-in-out;
width: 100%;
height: 100vh;
height: 100svh;
z-index: 999998;
}
header .menuBox {
background: var(--color_1);
border-radius: 20px 20px;
color: #fff;
opacity: 0;
overflow-y: auto;
padding: min(10vw, 32px) min(5vw, 36px);
pointer-events: none;
position: fixed;
top: 80px;
right: -500px;
transition: .5s ease-in-out;
width: 88%;
max-width: 450px;
max-height: calc(100vh - 90px);
max-height: calc(100svh - 90px);
z-index: 1;
overflow-y: scroll;
-ms-overflow-style: none; /* IE, Edge 対応 */
scrollbar-width: none; /* Firefox 対応 */
}
header .menuBox::-webkit-scrollbar { /* Chrome, Safari 対応 */
display:none;
}
.menu-open .headerBox {
background-color: var(--color_2);
}
header .menu-outer.open .menuBtn {
transition: .3s ease-in-out;
}
header .menu-outer.open .humberger span {
border-top-width: 2px;
width: 20px;
right: 0;
}
header .menu-outer.open .humberger span:nth-child(1) {
bottom: 0;
transform: rotate(-135deg);
}
header .menu-outer.open .humberger span:nth-child(2) {
width: 0;
opacity: 0;
}
header .menu-outer.open .humberger span:nth-child(3) {
top: 0;
transform: rotate(135deg);
}
header .menu-outer.open .menuBtn-text {
opacity: 0;
height: 0;
}
.menu-open header + .maskBox {
opacity: 1;
pointer-events: auto;
}
header .menu-outer.open .menuBox {
pointer-events: auto;
right: min(5vw, 20px);
opacity: 1;
}
header .menuBox .menuBox-inner {
}
header .menuBox .menu {
display: grid;
grid-gap: 0 1em;
grid-template-columns: repeat(2, 1fr);
position: relative;
}
header .menuBox .menu::before {
background-image: radial-gradient(circle, #ffffff 1px, transparent 1px);
background-position: left top;
background-repeat: repeat-y;
background-size: 2px 6px;
content: '';
display: block;
margin: auto;
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 100%;
}
header .menuBox .menu-item {
background-image: radial-gradient(circle, #ffffff 1px, transparent 1px);
background-position: left top;
background-repeat: repeat-x;
background-size: 6px 2px;
padding: .8em 0 .5em;
position: relative;
}
header .menuBox .menu-item:nth-child(1),
header .menuBox .menu-item:nth-child(2) {
background: none;
}
header .menuBox .menu-item a {
width: 100%;
}
header .menuBox .menu-item img {
filter: brightness(0) invert(10);
}
header .menu-outer .menu-main .menu-pc {
display: none;
}
header .menuBox .menu li a {
position: relative;
}
.menu .menu-item.no_link > a {
pointer-events: none;
}
/* ////////// mobile ////////// NOTE header mobile */
@media screen and (max-width: 959.9px) {
header ,
header .headerBox {
height: 70px;
width: 100%;
}
header.hide {
top: -130px;
}
header .headerBox {
position: fixed;
top: 0;
left: 0;
}
.header_logo {
display: flex;
align-items: center;
}
header .logo_img-link {
position: relative;
}
header .logo_img {
height: 35px;
}
header .logo-catchcopy {
height: 35px;
}
header .pc_menu {
display: none;
}
header .menu-outer {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
}
header .menuBtn {
position: fixed;
top: 12px;
right: 12px;
}
}
@media screen and (max-width:768px) {
.pc_menu .header-contact {
display: none;
}
}
@media screen and (max-width:500px) {
header .menuBox {
width: 90%;
max-width: none;
}
}
@media screen and (min-width:769px) and (max-width:959.9px) {
.menu-open .header_logo a {
filter: none;
}
header .menuBox {
width: 500px;
}
header .menu-outer.open .menuBox {
/* left: calc(100% - 500px); */
}
}
/* ////////// PC ////////// NOTE header PC */
@media print, screen and (min-width: 769px) {
}
@media print, screen and (min-width: 960px) {
header {
height: min(10vw, 138px);
}
header .headerBox {
backdrop-filter: blur(3px);
padding: 10px 0;
position: fixed;
left: 0;
right: 0;
transition: .3s ease-in-out;
width: 100%;
height: min(10vw, 138px);
z-index: 999999;
}
header.hide .headerBox {
transform: translateY(-130px);
}
header.global .headerBox:hover::before {
opacity: 1;
}
header.hide {
top: -180px;
}
header .header-inner {
max-width: none;
justify-content: space-around;
}
header .logo_img {
width: min(12vw, 100px);
}
header .header_logo a:hover {
color: inherit;
}
header .pc_menu {
display: flex;
align-items: center;
gap: min(2vw, 80px);
justify-content: flex-end;
/* flex: 1; */
height: min(100%, 73px);
}
header .pc_menu .menu {
color: var(--color_1);
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0;
font-size: min(1.4vw, 1.6rem);
font-weight: 700;
line-height: 1.4;
height: 100%;
padding: 0;
}
header .pc_menu .menu > .menu-item {
background-image: radial-gradient(circle, var(--color_1) 1px, transparent 1px);
background-position: left top;
background-repeat: repeat-y;
background-size: 2px 6px;
display: flex;
align-items: center;
padding: 0;
position: relative;
}
header .pc_menu .menu > .menu-item:last-child {
background-image: radial-gradient(circle, var(--color_1) 1px, transparent 1px), radial-gradient(circle, var(--color_1) 1px, transparent 1px);
background-position: right top, left top;
background-repeat: repeat-y, repeat-y;
background-size: 2px 6px, 2px 6px;
}
header .pc_menu .menu > .menu-item > a {
opacity: .5;
}
header .pc_menu .menu > .menu-item > a:hover {
opacity: 1;
}
header .pc_menu .menu > .menu-item.current > a {
opacity: 1;
}
header .pc_menu .menu > .menu-item > a:hover {
opacity: 1;
}
.header-logo-catchcopy {
width: min(10vw, 100px);
}
header .menuBtn ,
header .menu-outer {
display: none;
}
header .pc_menu .cta_btn {
font-size: min(1.6vw, 1.8rem);
}
}
@media screen and (min-width:1200px) {
header .pc_menu .menu > .menu-item > a {
width: 130px;
}
}
@media (hover: hover) {
header .headerBox:hover {
background: rgba(255, 252, 239, 1);
}
header .pc_menu .sub-menu a:hover {
color: var(--mainColor);
opacity: 1;
}
header .menuBox .menu a:hover {
color: var(--mainColor);
}
.pc_menu .header-contact-mail-link:hover {
box-shadow: none;
}
}
/*====================================================
//// id 装飾
====================================================*/
/*====================================================
//id form
====================================================*/
input, button, select {
margin: 0;
padding: 0;
background: none;
background-image: none;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: inherit;
cursor: pointer;
}
input[type="text"],input[type="email"],input[type="tel"],input[type="no"],input[type="search"],input[type="password"],input[type="url"],input[type="number"], select, textarea {
-webkit-appearance: none;
background: #fff;
border: solid 4px var(--l_gray);
border-radius: 10px;
display: block;
font-family: var(--font_family);
line-height: 1.6;
margin: .5em 0;
padding: .6em .8em .7em;
transition: .2s ease-in-out;
width: 100%;
max-width: 800px;
}
input:required ,
select:required {
background: var(--l_yellow);
}
input.error, select.error, textarea.error {
background: var(--pink);
border-color: var(--red);
}
::-moz-placeholder {
color: var(--gray2);
}
:-ms-input-placeholder {
color: var(--gray2);
}
::placeholder {
color: var(--gray2);
}
textarea {
resize: vertical;
min-height: 80px;
width: 100%;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
border-color: var(--gray);
}
input[type="file"],
label {
cursor: pointer;
display: grid;
}
.checkboxBox, .radioBox {
display: flex;
flex-wrap: wrap;
grid-gap: 16px;
}
input[type="checkbox"] + label ,
input[type="radio"] + label {
border-style: solid;
border-color: var(--l_gray);
border-width: 4px;
border-radius: 10px;
display: grid;
align-items: center;
font-weight: bold;
line-height: 1.4;
padding: .5em;
position: relative;
transition: .2s ease-in-out;
}
input[type="checkbox"] + label {
padding-left: 2.8em;
}
input[type="checkbox"] + label:before {
background: #fff;
border: solid 4px var(--l_gray);
border-radius: .25em;
content: '';
position: absolute;
top: .9em;
left: .8em;
transition: .2s ease-in-out;
width: .9em;
height: .9em;
}
input[type="checkbox"] + label:after {
background: url('../img/cmn/check.png') no-repeat center / contain;
box-sizing: border-box;
content: '';
opacity: 0;
position: absolute;
top: 1.1em;
left: 1em;
transition: .2s ease-in-out;
width: .9em;
height: .9em;
}
input[type="checkbox"]:checked + label::before {
border-color: #fff;
}
input[type="checkbox"]:checked + label:after {
opacity: 1;
}
input[type="radio"] + label {
text-align: center;
}
input[type="checkbox"]:checked + label ,
input[type="radio"]:checked + label {
background: var(--mainColor);
border-color: var(--mainColor);
color: #fff
}
input[type="checkbox"] + label.long_label {
border: none;
border-radius: 0;
padding-left: 1.8em;
padding-right: 0;
width: auto;
max-width: none;
height: auto;
min-height: 0;
}
input[type="checkbox"]:checked + label.long_label {
background: transparent;
border: none;
color: inherit;
}
input[type="checkbox"] + label.long_label:before {
top: .6em;
left: 0;
}
input[type="checkbox"]:checked + label.long_label:before {
border-color: var(--l_gray);
}
input[type="checkbox"] + label.long_label:after {
top: .75em;
left: .25em;
}
.select {
position: relative;
max-width: 800px;
}
.select:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: solid 4px transparent;
border-top-color: currentColor;
border-top-width: 6px;
border-bottom-width: 0;
right: 20px;
top: 0;
bottom: 0;
margin: auto;
pointer-events: none;
z-index: 100;
}
.select select {
width: 100%;
}
#confirm .select:before {
display: none;
}
select {
cursor: pointer;
padding-right: 2em;
}
label img {
display: inline-block;
margin-right: .4em;
transition: .2s ease-in-out;
vertical-align: text-bottom;
width: 1.3em;
}
input:checked + label img {
filter: brightness(0) invert(1);
}
button:disabled {
cursor: default;
filter: grayscale(.7);
opacity: .5;
pointer-events: none;
}
.formBox dt {
display: flex;
align-items: baseline;
grid-gap: .3em 2em;
flex-wrap: wrap;
font-size: 1.2em;
line-height: 1.6;
margin-bottom: .5em;
}
.formBox dd + dd {
margin-top: 1em;
}
.input-outer {
padding: 19px 30px;
}
.requiredMark {
background: var(--red);
border-radius: 1em;
color: #fff;
display: inline-block;
font-size: .7em;
line-height: 1.6;
padding: 0 1em .1em;
vertical-align: .1em;
}
.btnBox .box-inner.flexBox {
grid-gap: 30px;
justify-content: space-evenly;
margin: auto;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
input[type="text"],input[type="email"],input[type="tel"],input[type="no"],input[type="search"],input[type="password"],input[type="url"],input[type="number"], select, textarea {
border-radius: 5px;
border-width: 2px;
}
.checkboxBox, .radioBox {
flex-direction: column;
}
input[type="checkbox"] + label ,
input[type="radio"] + label {
border-radius: 5px;
border-width: 2px;
min-height: 3.2em;
}
input[type="checkbox"] + label::before ,
input[type="radio"] + label::before {
border-width: 2px;
top: .85em;
width: 1.2em;
height: 1.2em;
}
input[type="checkbox"] + label.long_label::before {
top: .5em;
}
.errorBox {
border-width: 4px;
padding: 1em 1em
}
.formBox .itemBox {
grid-gap: 2.5em;
}
.formBox dt {
flex-direction: column;
}
.input-outer {
border-radius: 5px;
padding: 14px 15px;
}
.btnBox .box-inner.flexBox {
grid-gap: 1.3em;
}
.btnBox .box-inner.flexBox .reverseBtn {
width: 74%;
max-width: 310px;
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
input[type="checkbox"] + label ,
input[type="radio"] + label {
width: 240px;
max-width: calc(100% / 3 - 20px / 3);
min-height: 70px;
}
.errorBox {
padding: 1em 1.2em
}
.formBox .itemBox {
grid-gap: 60px;
}
.btnBox .box-inner.flexBox{
flex-direction: row-reverse;
}
.btnBox .box-inner.flexBox .linkBtn {
width: auto;
min-width: 290px;
max-width: none;
}
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
.checkboxBox, .radioBox {
grid-gap: 10px;
}
.btnBox .box-inner.flexBox {
flex-direction: column;
}
}
@media screen and (min-width:1040px) {
input[type="checkbox"] + label ,
input[type="radio"] + label {
}
}
.delay-01 {
transition-delay: .1s;
}
.delay-02 {
transition-delay: .2s;
}
.delay-03 {
transition-delay: .3s;
}
.delay-04 {
transition-delay: .4s;
}
/*====================================================
////class page_title
====================================================*/
.page_title-inner {
padding-bottom: 0;
}
.page_title-head {
background-color: var(--color_5);
border-radius: min(5vw, 50px);
color: var(--color_1);
display: grid;
font-weight: 900;
line-height: 1.3;
padding: .4em 0;
text-align: center;
}
.page_title-head .sub {
/*font-size: .8em;
font-weight: 700;*/
font-size: .6em;
font-weight: 400;
}
.content_box {
background-color: #fff;
border-radius: min(3vw, 30px);
padding: min(6vw, 80px) min(4vw, 100px) min(10vw, 100px);
}
.comingsoon-img {
margin: min(10vw, 50px) auto;
width: min(80%, 460px);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
.page_title-head {
font-size: min(6.5vw, 4rem);
}
#page_title + section > .innerBox {
padding-top: min(7vw, 30px);
}
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
.page_title-head {
font-size: min(5vw, 5rem);
}
.content_box {
padding: min(8vw, 80px) min(6vw, 100px);
}
}
/*====================================================
//// id bg
====================================================*/
body:not(#top) .bg-dot-wrapper {
position: relative;
}
body:not(#top) .bg-dot {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
body:not(#top) .bg-dot::before {
background: url('../img/cmn/bg-dot.svg') repeat-y top center;
background-size: 100% auto;
content: '';
display: block;
margin: auto;
position: absolute;
top: 0;
left: -15%;
right: -15%;
width: min(130%, 1630px);
height: 100%;
}
/*====================================================
////class .pagetop
====================================================*/
.pagetop {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
transform: none !important;
z-index: 1000;
/* border: solid 1px*/
}
.pagetop.stop {
position: absolute;
top: -70px;
bottom: auto;
}
.pagetop a {
color: #fff;
display: grid;
grid-gap: .2em;
font-size: min(3vw, 3rem);
font-weight: 700;
line-height: 1em;
place-content: center;
position: relative;
width: 100%;
height: 100%;
}
.pagetop a .arrow {
background: var(--color_1) url('data:image/svg+xml;charset=UTF-8,') no-repeat center;
background-size: calc(100% - 3px) calc(100% - 3px);
border-radius: 100%;
margin: 0;
position: relative;
transform: rotate(-90deg);
width: 2em;
height: 2em;
}
.pagetop a .text {
text-shadow: 0 0 2px var(--color_1), 0 0 2px var(--color_1), 0 0 2px var(--color_1), 0 0 2px var(--color_1), 0 0 2px var(--color_1), 0 0 2px var(--color_1), 0 0 2px var(--color_1), 0 0 2px var(--color_1), 0 0 2px var(--color_1), 0 0 2px var(--color_1), 0 0 2px var(--color_1), 0 0 2px var(--color_1), 0 0 2px var(--color_1), 0 0 2px var(--color_1), 0 0 2px var(--color_1), 0 0 2px var(--color_1), 0 0 2px var(--color_1), 0 0 2px var(--color_1), 0 0 2px var(--color_1), 0 0 2px var(--color_1), 0 0 2px var(--color_1) ;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
.pagetop {
right: 10px;
bottom: 10px;
}
}
@media screen and (min-width:480px) and (max-width:769px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
}
/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
}
@media screen and (min-width:1280px) {
}
/*====================================================
////id footer
====================================================*/
footer {
padding: min(4vw, 40px);
}
footer .copyright {
font-size: 1.0rem;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
}
@media screen and (max-width:500px) {
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
}
/*====================================================
//// id xxx
====================================================*/