@charset "utf-8";
abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin: 0;padding: 0;border:0;outline:0;font-size:100%;vertical-align:baseline;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin: 0;padding: 0;font-size:100%;vertical-align:baseline;background:0 0}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}li{list-style:none}img{vertical-align:bottom;flex-shrink:0;margin: 0;padding: 0;line-height:1}ul{list-style-type:none;margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0;padding-inline-start:0}
input:-webkit-autofill, input:-webkit-autofill:active, input:-webkit-autofill:focus, input:-webkit-autofill:hover {animation-name: onAutoFillStart;transition: background-color 50ms ease-in-out 0;background:#fff;}
input:-internal-autofill-selected {background:#fff;}
button, input, select, textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
border: 0;
border-radius: 0;
font: inherit;
outline:0;
}
textarea {resize:vertical}
button, input[type=button], input[type=submit], label, select {cursor:pointer}
select::-ms-expand {display:none}
form{
padding: 0;
margin: 0;
border: 0;
outline: 0;
display: -webkit-flex;
display: flex;
flex-wrap:wrap;
}
input[type=text] {vertical-align:center}
button, input[type=submit] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
outline:0;
margin: 0;
padding: 0;
}
input[type=submit] {-webkit-appearance: none;border-radius:0;}
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) }/*Android タップの青を消す*/
img{
vertical-align: bottom;
margin: 0;
padding: 0;
display: block;/* iOS隙間対策 */
/*本当はdisplay:block; センタリングが効かなくなるので、都度、1マイごとに設定する必要あり。隙間対策*/
}
h1, h2, h3, h4, h5{
font-weight: 400;
font-style: normal;
}
.family_shitei{
/*迷っている*/
/*Neue Haas Grotesk Display 45 Light*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 400;
font-style: normal;
/*Neue Haas Grotesk Display 55 Roman*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;
/*Neue Haas Grotesk Display Pro 65 Medium*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600;
font-style: normal;
/*Neue Haas Grotesk Display Pro 75 Bold*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 700;
font-style: normal;
/*DNP ShueiGoKinStd L*/
font-family: "dnp-shuei-gothic-kin-std", sans-serif;
font-weight: 400;
font-style: normal;
/*DNP ShueiGoKinStd B*/
font-family: "dnp-shuei-gothic-kin-std", sans-serif;
font-weight: 600;
font-style: normal;
/*DNP ShueiGoKinStd M*/
font-family: "dnp-shuei-gothic-kin-std", sans-serif;
font-weight: 500;
font-style: normal;
}
a{text-decoration:none;color:#000;}
a:hover{text-decoration:none;color:#000;}
a:visited{text-decoration:none;color:#000;}
body{
margin:0;
padding:0;
background: #fff;
font-family: YakuHanJPs, "dnp-shuei-gothic-kin-std", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
font-weight: 400;
font-style: normal;
color: #000;
/*フォント句読点、約物は詰めない*/
-moz-font-feature-settings: "pkna" 1;
-webkit-font-feature-settings: "pkna" 1;
font-feature-settings: "pkna" 1;
letter-spacing: 0.0em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*swup.js 消すとエラーがおきます*/
.transition-fade{
margin: 0;
padding: 0;
opacity: 1;
transition: 1ms;
transition-timing-function: ease-in;
}
/*ページ読込む時、*/
html.is-animating .transition-fade{
margin: 0;
padding: 0;
opacity: 1;/*本当は0*/
transition: 1ms;
/*transform: translateX(0%);*/
}
/*ページ離れる時、*/
html.is-leaving .transition-fade{
margin: 0;
padding: 0;
opacity: 1;/*本当は0*/
transition: 1ms;
/*transform: translateX(0);*/
}
/*swup.js*/
.text_random{
opacity: 0;
}
#content_area{
margin: 0;
padding: 0;
opacity: 0;/*swup.jsで管理*/
overflow-x: hidden;/*CANVASがどうしてもはみ出しちゃうから必要*/
}
.base_bg{
position: fixed;
z-index: -2;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #fff;
}
.loader_layout{
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.loader {
width: 48px;
height: 48px;
border: 3px solid #ccc;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 3s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*プログレスバー
----------------------------------------------------------------------*/
.progressbar_container{
position: fixed;
z-index: -1;
opacity: 0;
top: 0;
left: 0;
background-color: none;/*色*/
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.op_inner{
/*天地左右中央*/
width: 65vw;
}
.op_text{
position: relative;
width: 30px;
height: 20px;
line-height: 20px;
text-align: left;
font-size: 14px;
color: #333;
/*Neue Haas Grotesk Display 55 Roman*/
font-family: neue-haas-grotesk-display, sans-serif;
font-weight: 500;
font-style: normal;
}
.op_bar_layout{
position: relative;
background-color: none;/*色*/
width: 100%;
height: 3px;
}
.op_bar{
position: relative;
background-color: none;/*色*/
margin-top: 5px;
width: 0%;
height: 3px;
}
/*プログレスバー*/
.pc_show{
display: none;
}
.sp_show{
display: inline-block;
}
::selection {
background-color: #f6f6f6;
}
/*フッター*/
body.top_page .footer_area{
opacity: 0;
display: none;
}
.footer_area{
position: relative;
z-index: 2;
width: 100%;
margin: 0;
padding: 40px 0 20px 0;
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;
user-select:none;
-webkit-user-select:none;
-ms-user-select: none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-drag:none;
-khtml-user-drag:none;
border-top: 1px solid #000;
background: #fff;
}
.sanretu{
position: relative;
width: 100%;
margin: 0;
padding: 0 20px;
box-sizing: border-box;
}
.first_area{
margin: 0;
max-width: 400px;
overflow: hidden;
}
.second_area{
margin: 0;
}
.third_area{
margin: 0;
max-width: 350px;
}
.ido_keido{
position: relative;
z-index: 2;
font-size: 11px;
font-feature-settings: "kern";
letter-spacing: 0.0em;
line-height: 1.2;
}
/*FOOTERのCCONTACT*/
.footer_contact_midashi{
position: relative;
margin: 0;
padding: 0 0 10px 0;
cursor: pointer;
font-size: 25px;
font-feature-settings: "kern";
letter-spacing: -0.03em;
line-height: 1.0;
}
.footer_contact_kaisetu{
position: relative;
margin: 0 0 30px 0;
padding: 0;
font-size: 11px;
font-feature-settings: "kern";
letter-spacing: 0.0em;
line-height: 1.2;
}
/* ナビゲーション全体のスタイル */
ul.footer_nav01{
display: flex;
flex-wrap: wrap;
margin: 30px 0 0 0;
padding: 0;
list-style: none;
}
ul.footer_nav01 li{
position: relative;
margin: 0 20px 0 0;
padding: 0;
font-size: 11px;
font-feature-settings: "kern";
letter-spacing: 0.0em;
}
ul.footer_nav01 li:last-child{
margin: 0 0 0 0;
}
/* 最後のli要素（コピーライト）のスタイル */
ul.footer_nav01 li:last-child {
/* (2) この要素の幅を100%にして、強制的に改行させる */
flex-basis: 100%;
text-align: left;
margin-top: 10px;
}
/* リンク（aタグ）のスタイル */
.footer_nav01 a {
position: relative; /* ::after擬似要素を配置する基準点にする */
display: inline-block;
padding-bottom: 2px; /* テキストと下線の間の余白 */
text-decoration: none; /* デフォルトの下線を消す */
white-space: nowrap;/* 【変更点1】テキストが折り返されないようにする */
}
/* コピーライトなど、リンクではないテキストのスタイル */
.footer_nav01 > li > .text_random {
color: #000;
}
/* 【変更点2】アニメーション用の下線（対象をタグのみに限定） */
.footer_nav01 a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px; /* 下線の太さ */
background-color: #000; /* 下線の色 */
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
/* 【変更点2】マウスオーバー時のスタイル（対象をタグのみに限定） */
.footer_nav01 a:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/*ブラウザ アウトフォーカス*/
#outfocus_area{
position: fixed;
top:0;
left: 0;
z-index: -1;
opacity: 0;
width: 100vw;
height: 100vh;
background: #000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
#outfocus_area img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
/*スマホ終了
--------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*PC開始*/
@media screen and (min-width:768px) {
.pc_show{
display: inline-block;
}
.sp_show{
display: none;
}
ul#g_nav{
opacity: 0;/*swupl.jsで管理*/
position: fixed;
z-index: 1999;
top: 10px;
left: 20px;
width: calc( 100% - 40px );
width: -webkit-calc( 100% - 40px );
margin: 0;
padding: 0;
/*全体 子要素を折り返しせず、1行に配置（wrapが複数行OK）*/
display: -webkit-flex;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
user-select:none;
-webkit-user-select:none;
-ms-user-select: none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-drag:none;
-khtml-user-drag:none;
mix-blend-mode: difference;
}
ul#g_nav li{
position: relative;
flex-basis: 90px;
height: 20px;
text-align: left;
/*Neue Haas Grotesk Display Pro 65 Medium*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600;
font-style: normal;
/*Neue Haas Grotesk Display Pro 55 Roman*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 19px;
font-feature-settings: "kern";
letter-spacing: -0.02em;
color: #fff;
text-decoration: underline;
}
ul#g_nav li:nth-child(1){
flex-basis: 105px;
}
ul#g_nav li:nth-child(3){
flex-basis: 70px;
}
ul#g_nav li:last-child{
margin: 0 0 0 0;
}
ul#g_nav li a{
position: absolute;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 20px;
}
/*フッター
-----------------------------------------------------------------------------*/
.footer_area{
position: relative;
z-index: 1;
background: none;
width: 100%;
margin: 0;
padding: 80px 0 15px 0;
border-top: none;
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;
user-select:none;
-webkit-user-select:none;
-ms-user-select: none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-drag:none;
-khtml-user-drag:none;
}
.sanretu{
position: relative;
width: 100%;
margin: 0;
padding: 0 20px;
box-sizing: border-box;
/*全体 子要素を折り返しせず、1行で配置*/
display: -webkit-flex;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
gap: 20px; /* アイテム間の間隔を20pxに */
/*天地下に揃える */
-webkit-align-items: flex-end;
align-items:flex-end;
}
.first_area{
margin: 0;
max-width: 400px;
overflow: hidden;
}
.second_area{
margin: 0;
min-width: 240px;
}
.third_area{
margin: 0;
max-width: 350px;
}
.ido_keido{
position: relative;
z-index: 2;
font-size: 15px;
font-feature-settings: "kern";
letter-spacing: 0.0em;
line-height: 1.2;
}
/* ナビゲーション全体のスタイル */
ul.footer_nav01 {
display: flex;
flex-wrap: nowrap;
margin: 0;
padding: 0;
list-style: none;
}
ul.footer_nav01 li{
position: relative;
margin: 0 20px 0 0;
padding: 0;
font-size: 12px;
font-feature-settings: "kern";
letter-spacing: 0.0em;
}
ul.footer_nav01 li:last-child{
margin: 0 0 0 0;
}
/* リンク（aタグ）のスタイル */
.footer_nav01 a {
position: relative; /* ::after擬似要素を配置する基準点にする */
display: inline-block;
padding-bottom: 2px; /* テキストと下線の間の余白 */
text-decoration: none; /* デフォルトの下線を消す */
white-space: nowrap;/* 【変更点1】テキストが折り返されないようにする */
}
/* コピーライトなど、リンクではないテキストのスタイル */
.footer_nav01 > li > .text_random {
color: #000;
}
/* 【変更点2】アニメーション用の下線（対象をタグのみに限定） */
.footer_nav01 a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px; /* 下線の太さ */
background-color: #000; /* 下線の色 */
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
/* 【変更点2】マウスオーバー時のスタイル（対象をタグのみに限定） */
.footer_nav01 a:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/*FOOTERのCCONTACT*/
.footer_contact_midashi{
position: relative;
margin: 0;
padding: 0 0 10px 0;
cursor: pointer;
font-size: 50px;
font-feature-settings: "kern";
letter-spacing: -0.03em;
line-height: 1.0;
}
.footer_contact_kaisetu{
position: relative;
margin: 0;
padding: 0;
font-size: 15px;
font-feature-settings: "kern";
letter-spacing: 0.0em;
line-height: 1.2;
}
/*プログレスバー
----------------------------------------------------------------------*/
.progressbar_container{
position: fixed;
z-index: -1;
opacity: 0;
top: 0;
left: 0;
background-color: none;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.op_inner{
/*天地左右中央*/
width: 70vw;
}
.op_text{
position: relative;
width: 30px;
height: 20px;
line-height: 20px;
font-size: 22px;
text-align: left;
}
.op_bar_layout{
position: relative;
background-color: none;/*色*/
width: 100%;
height: 3px;
}
.op_bar{
position: relative;
background-color: none;/*色*/
margin-top: 5px;
width: 0%;
height: 3px;
}
/*プログレスバー*/
}/*PC終了*/