@charset "utf-8";


/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=MonteCarlo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("slide.css");
@import url("inview.css");

.swiper-wrapper {
z-index: -1!important;
}

p.logo {
    margin-top: 0;
}

section.star{
padding: 10px 0;
}

.poli{
margin-top: 40px;
}

p.policy_title{
color: #e6007e;
font-weight: 700 !important;
font-size: 24px;
line-height: 1;
letter-spacing: .02em;
margin-bottom: 0;
margin-top: 50px;
}

p.policy_text{
font-weight: 500 !important;
font-size: 16px;
line-height: 160%;
letter-spacing: .02em;
}



.ac {
width: 100%;
padding: 15px;
}

img.ser_star {
width: 80px;
margin: auto;
display: block;
}

.sub_title p{
margin: 0;
margin-top: 16px;
font-size: 20px;
font-weight: normal;
}

.ser_cont:first-child {
margin-top: -100px;
}

.ser_cont{
display: flex;
justify-content: space-between;
flex-direction: row;
width: 100%;
padding: 100px 0px;
border-bottom: 1px solid #333333;
}

.ser_cont img{
height: auto;
width: 40%;
}

.ser_clum{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
padding: 0px;
width: 50%;
}

.ser_clum h4{
color: #3a3e40;
margin: 0;
font-size: 26px;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.5;
text-align: left;
}

.ser_clum p{
color: #3a3e40;
margin: 0;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.08em;
line-height: 2;
margin-top: 32px;
}

.abouttop .com_bt_flex a {
width: 45%;
}

.abouttop .com_bt_flex{
gap:60px;
}

.ceo .st_left{
text-align: center;
}

.only_pc{
display: block;
}

.only_sp{
display: none;
}

#value {
background-image: url(../images/value_bg.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
color: #ffffff!important;
}

#value h4.mvv_title,
#value p.mvv_text{
color: #ffffff;
}

.value_right {
border-bottom: 1px solid #ffffff;
width: 100%;
padding-bottom:40px;
}

p.num_label {
width: 6.5rem;
margin: 0;
margin-left: -6.5rem;
font-size: 20px;
font-weight: bold;
color: #ffffff;
line-height: 1;
}

.value_cont {
width: 80%;
margin-left: auto;
padding-top: 50px;
display: flex;
align-items: flex-start;
}

p.val_txt {
margin: 0;
margin-top: 30px;
font-size: 18px;
line-height: 1.5;
font-weight: 400;
}

p.h5_jp {
font-size: 18px;
margin: 0;
margin-top: 5px;
}

.value_right h5 {
font-size: 40px;
margin: 0;
line-height: 1;
font-weight: 500;
}

.value_flex {
display: flex;
flex-direction: column;
align-items: flex-start;
}

h4.mvv_title{
font-size: 70px;
line-height: 1;
margin: 0;
color: #e6007e;
}

.mvv img {
width: 150px;
position: absolute;
z-index: 1;
top: -50px;
left: -70px;
opacity: 0.3;
}

.mvv {
position: relative;
}

.mvv_flex {
display: flex;
gap: 30px;
margin-top: 30px;
border-bottom: #333 solid 1px;
padding-bottom: 10px;
}

.mvv_flex a{
font-size: 27px;
color:#333333;
line-height: 1;
padding: 5px 10px;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
}

i.fa-caret-down {
margin-right: 7px;
color: #e6007e;
}

.mvv_flex a:hover{
color: #e6007e;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
}

.ceo_name {
    text-align: right;
    margin-top: 50px;
    line-height: 1.3;
    font-size: 1.3em;
}

.ceo_name img {
width: 250px;
}

dl#company,
.ceo,
.mvv_cont {
width: 90%;
margin: 0 auto;
}

h4.ceo_title {
font-size: 60px;
font-weight: 500;
color: #e6007e;
margin: 0;
line-height: 1.6;
}

.mvv_cont h4{
font-size: 50px;
font-weight: 500;
color: #000000;
margin: 0;
line-height: 1.4;
}

p.ceo_text,
p.mvv_text {
font-size: 20px;
line-height: 36px;
margin: 0;
margin-top: 40px;
font-weight: normal;
}

p.mvv_text {
margin-top: 10px;
color: #000000;
font-weight: bold;
}

.ceo {
margin-top: -50px;
}



.mvv_cont{
margin-top: 50px;
}

.com_bt_flex {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
}

img.com_bt{
margin-bottom: 15px;
}


.com_bt_flex a {
width: 30%;
}

h2.sub_title_en{
font-size: 70px;
margin: 0;
line-height: 1;
margin-top: 30px;
color: #e6007e;
}
.subtop_img{
display: block;
width: 100%;
height: auto;
aspect-ratio: 1280 / 480;
overflow: hidden;
border-radius: 16px;
margin-top: 100px;
}

.gmap-wrap {
width: 100%;
margin: 0px;
height: 350px;
}

section.price_table .com_cont {
border-bottom: solid 2px #c5c5c5;
width: 100%;
padding: 5px 0;
font-size: 16px;
font-weight: normal;
}

section.price_table .com_cont:first-child {
border-top: solid 2px #c5c5c5;
}

section.price_table .com_cont dt {
width: 300px;
}

section.price_table .sub_title {
margin-top: 50px;
}

p.price_kome{
padding-top:  10px;
font-size: 16px;
margin: 0;
line-height: 1.3;
}

span.komekome {
color: #e6007e;
font-weight: bold;
font-size: 0.8em;
}

p.komon{
text-decoration: underline; /* 下線 */
text-decoration-thickness: 0.5em; /* 線の太さ */
text-decoration-color: rgba(255, 255, 0, 0.5); /* 線の色 */
text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */
text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
line-height: 1.5;
}

.com_cont {
border-bottom: solid 1px #333;
width: 100%;
padding: 24px 0;
font-size: 16px;
font-weight: normal;
}

.com_cont:first-child {
border-top: solid 1px #333;
}

.com_cont dt {
width: 150px;
}

.com_cont dd {
width: 100%;
}

.com_cont {
display: flex;
}

.sub_title{
margin-top: 110px;
}


.bg_pk {
background: #e6007e;
}

.top_contact {
background-image: url(../images/contact_bg.png);
background-repeat: no-repeat;
background-size: cover;
padding: 50px;
margin: 30px 0;
border-radius: 30px;
text-align: center;
background-position-y:-100px;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
background-position: center;
}

.top_contact:hover{
opacity: 0.8;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
}

img.contact_star {
width: 36px;
}

p.contact_txt {
font-size: 16px;
color: #ffffff;
}

p.contact_title {
font-size: 36px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
color: #ffffff;
margin-top: 20px;
}

.swiper-container {
width: 100%;
margin: 40px 0;
padding: 45px 0;
}

.swiper-slide {
opacity: 0.4;
overflow: hidden;
transition: 1s;
}

.swiper-slide img {
width: 100%;
}

.swiper-slide-active {
opacity: 1;
z-index: 1;
transform: scale(1.3);
box-shadow: 0px 0px 30px #888;
}


/*「お知らせ」ブロック
---------------------------------------------------------------------------*/
/*お知らせブロック*/
#new {
margin: 0;
display: flex;/*flexボックスを使う指定*/
flex-wrap: wrap;/*折り返す指定*/
}

/*日付(dt)、記事(dd)共通設定*/
#new dt,
#new dd {
padding: 5px 0;/*上下、左右へのボックス内の余白*/
}



/*記事(dd)設定*/
#new dd {
width: 100%;/*「8rem」は上の「#new dt」のwidthの値です*/
font-size: 18px;
line-height: 1.3;
}

.news_cont:hover {
background: #e6007e12;
transition: all .5s ease;
}

.news_cont{
border-bottom: solid 2px #eee;
width: 100%;
padding: 0.5em;
transition: all .5s ease;
}

.news_cont dt span {
display: inline-block;
text-align: center;
line-height: 1.6;
border-radius: 2px;
padding: 0 1rem;
transform: scale(0.85);
border: 2px solid #e6007e;
margin-left: .8rem;
font-size: 14px;
color: #e6007e;
font-weight: 600;
}



.top_ser_ic_flex {
margin-top: 80px;
align-content: flex-start;
align-items: flex-start;
background: rgba(0, 0, 0, 0.0);
flex: none;
flex-direction: row;
flex-wrap: wrap;
height: auto;
justify-content: flex-start;
width: 100%;
display: flex;
}

.ser_icon {
flex: none;
flex-direction: column;
flex-wrap: nowrap;
height: auto;
justify-content: space-between;
margin: 0px 20px 80px;
width: calc(33% - 40px);
max-width: calc(33% - 40px);
display: flex;
align-items: flex-start;
}

.ser_icon a {
font-size: 14px;
text-decoration: none;
color: #E6007E;
margin-top: 10px;
}

.ser_icon p{
margin: 0;
line-height: 1;
}

.m_t_80{
margin-top: -50px;
}

p.ic_en {
margin-top: 30px;
font-size: 15px;
color: #999999;
}

p.ic_jp {
margin-top: 20px;
font-size: 24px;
}

p.ic_tx {
margin-top: 30px;
font-size: 16px;
line-height: 1.6;
}

.ser_icon img {
height: 100px;
}





p.topabout_en {
font-family: "DM Serif Display", serif;
font-weight: 900;
font-style: italic;
font-size: 5em;
line-height: 1.2;
}

.st_right {
position: absolute;
width: 500px;
left: 600px;
top: -10px;
}

.st_left {
position: relative;
}


.container {
flex: 1 0 auto;
width: 1100px;
margin: auto;
}

.noto-sans-jp-<uniquifier> {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
}

header {
position: absolute;
z-index: 1;
top: 0px;
width: 1100px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
position: fixed;
}

div#header {
display: flex;
justify-content: center;
}

header #logo{
margin:0;
letter-spacing:.1em;
font-size:2.2rem
}

figure#logo{
width:50%
}

header #logo a{
text-decoration:none;
display: inline-block;
width: max-content;
}

header #logo img{
width:250px;
}


.menu{
position:relative;
width:100%;
height:0;
max-width:1200px;
margin:0px;
display:flex;
justify-content:flex-end;
padding-left:40px;
align-items: baseline;
}

.menu > li{
float:left;
width:15%;
height:auto;
line-height:50px;
background-color:none;
box-sizing:border-box;
list-style:none;
line-height: 1.5;

}

.menu > li:last-child{
border-right:none
}

.menu > li a{
display:block;
color:#333;
text-align:center;
text-decoration:none;
font-size:18px
}

ul.menu__second-level{
visibility:hidden;
opacity:0;
z-index:1
}

ul.menu__third-level{
visibility:hidden;
opacity:0
}

ul.menu__fourth-level{
visibility:hidden;
opacity:0
}

.menu > li a:hover{
color:#E6007E;
}

.menu__second-level li{
height: auto;
line-height: 35px;
list-style: none;
border-bottom: dotted 1px #666;
}

.menu__second-level li:last-child{
border-bottom: none;
}

.menu__second-level li span {
line-height: 0;
}

.menu__third-level li{
border-top:1px solid #111
}

.menu__second-level li a{
text-align:left;
padding:0 1em;
font-weight:400;
font-size:15px;
letter-spacing:.01em;
padding-bottom: 10px;
height: auto;
}

.menu__second-level li a:hover{
color:#E6007E;
}

.menu__second-level li span:hover {
line-height: 0;
}

.menu:before,.menu:after{
content:" ";
display:table
}

.menu:after{
clear:both
}

.menu{
*zoom:1
}


.menu > .menu__single{
position:relative
}

.menu__single .menu__second-level{
position:absolute;
top:40px;
width:max-content;
background-color:#fff;
-webkit-transition:.2s ease;
transition:.2s ease;
visibility:hidden;
opacity:0
}

.menu__single:hover > .menu__second-level{
top:50px;
visibility:visible;
opacity:1;
padding-left:0;
width:-webkit-fill-available
}


.hamburger-menu{
display:none
}

.cross2{
position:relative;
display:inline-block;
width:40px;
height:2px;
background:#000;
transform:rotate(45deg);
vertical-align:middle
}

.cross2::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
transform:rotate(90deg)
}

.menu li span {
display: block;
font-size: 0.6em;
line-height: 1
}


/*スクロールダウン
---------------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');

.scroll_down{
position:absolute;
bottom: 60px;
right:  50px;
}

.scroll_down a{
position: absolute;
left: 5px;
bottom: 87px;
color: #666;
font-size: 14px;
font-family: "Noto Sans JP", sans-serif;
letter-spacing: .2em;
writing-mode: vertical-lr;
text-decoration: none;
text-transform: uppercase;
}

.scroll_down:before {
content: "";
position: absolute;
bottom: 0;
left: -4px;
width: 11px;
height: 11px;
border-radius: 50%;
background:#666;
animation:
circlemove 1.6s ease-in-out infinite,
cirlemovehide 1.6s ease-out infinite;
}

@keyframes circlemove{
0%{bottom:160px;}
100%{bottom:0px;}
}

@keyframes cirlemovehide{
0%{opacity:0}
50%{opacity:1;}
80%{opacity:0.9;}
100%{opacity:0;}
}

.scroll_down:after{
content:"";
position: absolute;
bottom:0;
left:0;
width:2px;
height: 160px;
background:#666;
}

/*TOP私たちについて
---------------------------------------------------------------------------*/
h2.about {
font-family: "Bebas Neue", sans-serif;
display: contents;
font-size: 90px;
margin: 0;
padding: 0;
font-weight: 500;
margin-bottom: 20px;
letter-spacing: 0.1em;
line-height: 1;
color: #222222;
}

.top_about .btn{
text-align: left;
}



.logo_flex {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}

.logo_cont {
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: nowrap;
line-height: 1.5;
}

.logo_cont::before {
top: 50%;
right: -1.5em;
z-index: -1;
transform: translateY(-50%) scaleX(0.5) rotate(45deg);
width: 12em;
height: 12em;
border: 0.3em solid currentColor;
border-left: none;
border-bottom: none;
}

.logo_cont::after {
top: 0px;
left: 0px;
bottom: 0px;
z-index: -1;
width: 7em;
border: 0.2em solid currentColor;
border-right: none;
}


.ar {
display: block;
width: 5%;
}

.more{
display:inline-block;
background:#E6007E;
padding:0.8rem 5rem;
border-radius:100px;
margin:20px 0;
border:solid 2px #E6007E;
color:#fff;
font-weight:500;
font-size:20px;
text-decoration:none;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
}

.more:hover{
background:#fff;
color:#E6007E;
}

.more2{
display:inline-block;
background:#ffffff;
padding:0.8rem 5rem;
border-radius:100px;
margin:20px 0;
border:solid 2px #E6007E;
color:#E6007E;
font-weight:500;
font-size:20px;
text-decoration:none;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
}

.more2:hover{
background:#E6007E;
color:#ffffff;
}


.btn {
text-align: center;
}

.top_about_box .top_inner {
width: 100%;
margin: 0;
}

.top_about_box .more{
margin:10px 0;
}


.top_about_box {
background-color: #ffffff;
width: 80%;
margin: auto;
background-image: url(../images/top_bg2.png);
background-repeat: no-repeat;
background-size: 70%;
background-position-x: 500px;
background-position-y: -250px;
padding: 30px 50px;
border-radius: 30px;
}


p.inner_text {
font-size: 18px;
line-height: 1.7;
}

p.inner_text_big {
font-size: 36px;
line-height: 1;
}

.ts_right ul{
list-style-type: disc;
list-style-position: inside
}

.ts_right ul a{
text-decoration: none;
}

.ts_right {
width: 70%;
}

.ts_right ul a li:hover{
text-decoration: none;
color: #e6007e;
transition: 0.5s;
border-bottom: dotted 1px #000000;
}

.ts_right li {
font-size: 17px;
border-bottom: dotted 1px #000000;
transition: 0.5s;
line-height: 3;
margin-left: 0px;
padding-left: 1rem;
display: flex;
align-items: baseline;
justify-content: space-between;
width: 100%;
flex-wrap: nowrap;
flex-direction: row;
}



.logo_cont p {
margin: 0;
}

p.logo_en{
font-size:3em;
font-weight: bold;
}

p.logo_jp{
font-size:1.5em;
}

p.logo_en::first-letter {
color: #E6007E;
}



/*文字アニメーション
---------------------------------------------------------------------------*/
/* ulタグ */
.scroll-list {
display: flex;
list-style: none;
padding-inline: 0;
margin-inline: 0;
gap: 0;
background-color: #ffffff;
overflow: hidden;
}

/* liタグ */
.scroll-list li {
color: #ffbde1;
font-size: 1.2em;
font-weight: bold;
white-space: nowrap;
padding: 0 1em 0 0;
margin: 0;
animation: marquee-left 30s linear infinite;
line-height: 1.6;
}



/* PCの時のフォントサイズ */
@media (min-width: 600px) {
.scroll-list li {
font-size: 2vw;
}
}

/* アニメーション */
@keyframes marquee-left {
100% {
transform: translateX(-100%);
}
}

/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
--base-color: #fff;/*テンプレートの土台となる色（主に背景カラー）*/
--base-inverse-color: #323232;/*上のbase-colorの対となる色（主にテキストカラー）*/

--primary-color: #fe3742;/*テンプレートのメインまたはアクセントカラー*/
--primary-inverse-color: #fff;/*上のprimary-colorの対となる色*/

--space-large: 8vw;/*主に余白の一括管理用。画面幅100%＝100vwです。*/
}


/*fadeInのキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}


/*fadeOutのキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;visibility: hidden;}
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}

html,body {
font-size: 13px;/*基準となるフォントサイズ*/
height: 100%;
}

/*画面幅1200px以上の追加指定*/
@media screen and (min-width:1000px) {

html, body {
font-size: 14px;
}

}/*追加指定ここまで*/

/*画面幅1600px以上の追加指定*/
@media screen and (min-width:1600px) {

html, body {
font-size: 1vw;
}

}/*追加指定ここまで*/


body {
margin: 0;padding:0;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
-webkit-text-size-adjust: none;
background: var(--base-color);/*varは背景色のことで冒頭のbase-colorを読み込みます。*/
color: var(--base-inverse-color);/*文字色。冒頭で指定しているbase-inverse-colorを読み込みます。*/
line-height: 2;/*行間*/
}


main{
background-image: url(../images/bg3.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

/*リセット他*/
figure {margin: 0;}
dd {margin: 0;}
nav ul {list-style: none;}
nav,ul,li,ol {margin: 0;padding: 0;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*input*/
input {font-size: 1rem;}

/*section*/
section {
overflow-x: hidden;
padding: 60px 0px;
}

section.top_about {
overflow-x: hidden;
padding:0;
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
color: inherit;
transition: 0.3s;/*hoverまでにかける時間。0.3秒。*/
text-decoration: none;
}

/*マウスオン時*/
a:hover {
text-decoration: none;/*下線を消す*/
opacity: 0.9;/*色を90%だけ出す*/
}


/*loading（ローディング）
---------------------------------------------------------------------------*/
@keyframes progress {
0% {transform: scaleX(0);}
100% {transform: scaleX(1);}
}

/*ロゴ画像*/
#loading img {
width: 300px;/*画像の幅*/
margin-bottom: 20px;/*ローディングバーとの間のスペース調整*/
border-radius: 200px;
opacity: 0.8;
}

/*ローディングブロック*/
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:#ffffff;/*背景色*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
animation: fadeOut 1s ease 3s forwards;
}

#loading p{
margin: 0;
color: #666666;
margin-top: -50px;
z-index: 1;
}


/*プログレスバーの土台*/
.progress-container {
width: 200px;/*幅。お好みで。*/
height: 4px;/*高さ。お好みで。*/
border-radius: 2px;/*角をほんの少し丸くする*/
background: #fff;/*バーのベースカラー*/
overflow: hidden;
}

/*プログレスバー*/
.progress-bar {
width: 100%;
height: 100%;
background: #000;/*進行中のバーの色*/
animation: progress 2s linear;  /*#loadingのanimation時間に合わせて2秒に設定*/
transform-origin: left;
}


/*container（サイト全体を囲むボックス）
---------------------------------------------------------------------------*/






/*メイン画像
---------------------------------------------------------------------------*/
/*ブロック全体*/


/* ボタンのスタイル */
.fv_btn a {
position: relative;
display: block;
width: 350px;
padding: 15px 0;
background-color: #E6007E;
border: solid 2px  #E6007E;
border-radius: 50px;
font-size: 20px;
color: #fff;
text-decoration: none;
text-align: center;
}

.fv_btn a:hover{
border: solid 2px  #E6007E;
background-color: #ffffff;
color: #E6007E;
}



#mainimg {
background: var(--base-color) url(../images/top_bg.gif) no-repeat center center / cover;
width: 100%;
padding-top: 100vh;
position: relative;
overflow: hidden;
background-position: left;
background-position: 600px -350px;
background-size: 75%;
background-color: rgba(255, 255, 255, 0.5);
background-blend-mode: overlay;
}


.main_left {
position: absolute;
top: 90px;/*header分を確保*/
left: 90px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}

/*テキストのブロック*/
#mainimg p {margin: 0;}
#mainimg .text {
font-size: 28px;/*文字サイズ。*/
font-weight: 800;/*太字に*/
line-height: 1.8;/*行間*/
text-align: center;/*テキストをセンタリング*/
}

p.top_en {
font-size: 0.7em;
font-weight: 600;
color: #747474;
}

p.top_jp {
font-size: 2em;
line-height: 1.3;
}

.text p {
margin: 0;
}


.main_rigiht{
position: absolute;
text-align: right;
bottom: 80px;
right: 90px;
font-size: 1.3rem;
font-weight: normal;
line-height: 1.5;
}


/*画面420px以上の追加指定*/
@media screen and (min-width:420px) {

#mainimg .text {
text-align: left;/*テキストを左寄せ*/
font-size: 3.6vw;/*文字サイズ。*/
}

}/*追加指定ここまで*/


/*ボタン*/
#mainimg .fv_btn {
font-size: 1rem;/*文字サイズ*/
font-weight: 600;/*少し太字に*/
margin-top: 3vw;/*上のテキストとボタンの間のスペース。*/
display: flex;
gap: 1rem;/*ボタン同士の余白*/
margin-top: 30px;
}
#mainimg .fv_btn a {
display: block;text-decoration: none;
padding: 0.8rem 2rem;/*ボタン内の余白。上下、左右へ。1rem=1文字分です。*/
margin-bottom: 10px;/*ボタン同士の隙間*/
}





/*1つ目のボタン（お問い合わせ）の追加設定*/
#mainimg .fv_btn p:nth-of-type(1) a {
background: var(--primary-color);/*背景色。冒頭のprimary-colorを読み込みます。*/
color: var(--primary-inverse-color);/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}

/*2つ目のボタン（資料請求）への追加設定*/
#mainimg .fv_btn p:nth-of-type(2) a {
background: var(--base-inverse-color);/*背景色。冒頭のbase-inverse-colorを読み込みます。*/
color: var(--base-color);/*文字色。冒頭のbase-colorを読み込みます。*/
letter-spacing: 0.1em;/*文字間隔を少しだけ広く*/
}

/*ボタン内のアイコン*/
#mainimg .fv_btn i {
transform: scale(1.4);/*140%に拡大*/
padding-right: 0.8rem;/*アイコンとテキストとの間の余白*/
}


/*main（メインコンテンツ）
---------------------------------------------------------------------------*/
main {
flex: 1 0 auto;
overflow-x: hidden;
}


body.sub {
background: var(--base-color) url(../images/top_bg.png) no-repeat center center / cover;
width: 100%;
position: relative;
background-position: left;
background-position:  700px -250px;
background-size: 900px;
background-color: rgba(255, 255, 255, 0.5);
background-blend-mode: overlay;
background-attachment: fixed;
}





#mainimg {
background: var(--base-color) url(../images/top_bg.gif) no-repeat center center / cover;
width: 100%;
padding-top: 100vh;
position: relative;
overflow: hidden;
background-position: left;
background-position: 700px -350px;
background-size: 1000px;
background-color: rgba(255, 255, 255, 0.4);
background-blend-mode: overlay;
}


/*h2見出し（共通）*/
h2.en,
h3.sub_title_jp,
h1.sub_title_jp {
margin: 0;padding: 0;
font-size: 17px;/*文字サイズ。240%。*/
font-weight: 500;/*太字に*/
margin-bottom: 5px;/*下にスペースを空ける*/
display: flex;
flex-direction: column-reverse;
letter-spacing: 0.1em;/*文字間隔を少しだけ広く*/
flex-direction: row;
gap:3px;
line-height: 1;
align-items: center;
}


img.h2en {
width: 25px;
}

.ts_left {
padding-bottom: 30px;
width: auto;
}

h3.jp {
font-size: 30px;
margin: 0;
line-height: 1;
font-weight: 500;
}

.top_ser_flex {
display: flex;
gap: 150px;
}

/*画面700px以上の追加指定*/
@media screen and (min-width:700px) {

main h2 {
font-size: 2.4rem;/*文字サイズ。240%。*/
}

}/*追加指定ここまで*/


/*テキストをセンタリングする場合*/
main h2.c {
align-items: center;
}

/*h2内のspan（小文字）*/
main h2 span {
font-size: 0.85rem;/*文字サイズ85%*/
opacity: 0.5;/*透明度。色を50%だけ出す。*/
font-weight: normal;/*太字ではなく標準にする*/
}


/*フッター
---------------------------------------------------------------------------*/
footer {
background: #e6007e;
color: var(--primary-inverse-color);
padding: 2rem;
display: flex;
flex-direction: column-reverse;
background-image: url(../images/maru.png);
background-size: 80px;
}
/*フッター直下の1つ目ブロック（ロゴやSNSアイコンが入ったブロック）*/
footer div:nth-of-type(1) {
text-align: center;
}

footer a {
  color: #ffffff!important;
}

/*フッター直下の２つ目ブロック（メニューブロック）*/
footer div:nth-of-type(2) {
flex: 1;
display: flex;
gap: 2rem;/*このブロック内の直下のブロック同士に空ける余白。４文字分。*/
}


/*画面700px以上の追加指定*/
@media screen and (min-width:700px) {

footer {
flex-direction: row;
gap: 4rem;/*フッター内の直下のブロック同士に空ける余白。４文字分。*/
padding: 4rem;/*フッター内の余白。４文字分。*/
}

/*フッター直下の1つ目ブロック（ロゴやSNSアイコンが入ったブロック）*/
footer div:nth-of-type(1) {
text-align: left;
width: 30%;/*幅*/
}

/*フッター直下の２つ目ブロック（メニューブロック）*/
footer div:nth-of-type(2) {
justify-content: flex-end;/*ブロックを右に寄せる。この行を削除すれば、ロゴ画像の方によります。*/
gap: 4rem;/*このブロック内の直下のブロック同士に空ける余白。４文字分。*/
}

}/*追加指定ここまで*/


footer ul {
margin: 0;padding: 0;list-style: none;
margin-bottom: 2rem;
}


/*Copyright部分*/
footer small {
display: block;
padding-top: 2rem;/*SNSアイコンとコピーライトの間の余白調整*/
}


/*フッター内にあるソーシャルメディアのアイコン
---------------------------------------------------------------------------*/
.icons {
list-style: none;
margin: 0;padding: 0;
display: flex;
justify-content: center;
gap: 1rem;/*アイコン同士のマージン的な要素。１文字分。*/
}

/*画面700px以上の追加指定*/
@media screen and (min-width:700px) {

.icons {
justify-content: flex-start;
}

}/*追加指定ここまで*/

.icons i {
font-size: 30px;/*アイコンサイズ*/
}


/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）
---------------------------------------------------------------------------*/
.pr a {
text-decoration: none;
display: block;
background: rgba(0,0,0,0.9);
text-align: right;
padding: 0.5rem 1rem;
color: #ccc;
}
.pr a::before {
font-family: "Font Awesome 6 Free";
content: "\e2ca";
font-weight: bold;
margin-right: 0.5em;
}


/*c2（２カラムレイアウト用）
---------------------------------------------------------------------------*/

/*画面幅700px以上の追加指定*/
@media screen and (min-width:700px) {

.c2 {
display: flex;
gap: 2rem;
}

/*左側のタイトルブロックの幅*/
.c2 .title {
width: 30%;
}

/*右側のテキストブロック*/
.c2 .text {
flex: 1;
}

}/*追加指定ここまで*/


/*FAQ
---------------------------------------------------------------------------*/

/*画面幅700px以上の追加指定*/
@media screen and (min-width:700px) {

.faq {
font-size: 1.2rem;/*文字サイズを120%*/
}

}/*追加指定ここまで*/

/*質問*/
.faq dt {
display: flex;
align-items: flex-start;
border-radius: 3px;/*角を少しだけ丸く*/
margin-bottom: 1rem;/*下に空けるスペース。質問ブロック同士の余白です。*/
background: var(--base-color);/*背景色。冒頭のbase-colorを読み込みます。*/
color: var(--base-inverse-color);/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
padding: 1rem;/*ブロック内の余白。１文字分。*/
}

/*「Q」アイコン*/
.faq dt::before {
font-family: "Font Awesome 6 Free";
content: "\51";/*アイコン画像の指定*/
margin-right: 0.5rem;/*右側に空けるスペース*/
background: var(--primary-color);/*背景色。冒頭のprimary-colorを読み込みます。*/
color: var(--primary-inverse-color);/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
border-radius: 50%;/*角を丸くする*/
width: 30px;/*幅*/
line-height: 30px;/*高さ*/
text-align: center;
flex-shrink: 0;
margin-top: 0.2em;/*微調整*/
}

/*回答*/
.faq dd {
padding: 0 1rem 1rem 3.7rem;/*ボックス内の余白。上、右、下、左への順番。*/
}

/*opencloseを適用した要素のカーソル*/
.openclose {
cursor: pointer;/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}


/*お知らせブロック
---------------------------------------------------------------------------*/
/*記事の下に空ける余白*/
.new dd {
padding-bottom: 1rem;
}

/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/
.new dt span {
display: inline-block;
text-align: center;
line-height: 1.8;/*行間（アイコンの高さ）*/
border-radius: 2px;/*角を丸くする指定*/
padding: 0 1rem;/*上下、左右へのブロック内の余白*/
width: 8rem;/*幅。8文字分。*/
transform: scale(0.85);/*85%のサイズに縮小*/
border: 1px solid #777;/*枠線の幅、線種、色*/
}

/*icon-bg1。サンプルテンプレートでは「重要」と書いてあるマーク*/
.new .icon-bg1 {
border-color: transparent;/*枠線を透明に*/
background: #cd0000;/*背景色*/
color: #fff;/*文字色*/
}

/*icon-bg2。サンプルテンプレートでは「サービス」と書いてあるマーク*/
.new .icon-bg2 {
border-color: transparent;/*枠線を透明に*/
background: var(--primary-color);/*背景色。冒頭のprimary-colorを読み込みます。*/
color: var(--primary-inverse-color);/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}

/*画面幅700px以上の追加指定*/
@media screen and (min-width:700px) {

/*ブロック全体*/
.new {
display: grid;/*gridを使う指定*/
grid-template-columns: auto 1fr;/*横並びの指定。日付とアイコン部分の幅は自動で、内容が入るブロックは残り幅一杯とる。*/
}

}/*追加指定ここまで*/


/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*画像たちを囲むブロック*/
.slide-thumbnail1 .img {
display: flex;
gap:20px;
align-items: center;
}

/*画像*/
.slide-thumbnail1 .img img {
padding: 5px;/*画像の余白*/
}

/*右から左へ、左から右へ、のアニメーション*/
.slide-thumbnail1 .rtl, .slide-thumbnail1 .ltr {
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.slide-thumbnail1 .rtl {animation-name: slide-rtl;}
.slide-thumbnail1 .ltr {animation-name: slide-ltr;}

@keyframes slide-rtl {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}


/*テキストスライド
---------------------------------------------------------------------------*/
.text-slide-wrapper {
overflow-x: hidden;
margin-top: calc(-1 * (1.6 * var(--space-large)));/*本来の位置より上にずらす。ずらしたくなければこの１行を削除。*/
}

.text-slide {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 600;
display: flex;
white-space: nowrap;
font-size: 15vw;/*文字サイズ*/
opacity: 0.05;/*透明度。色が5%出た状態。*/
}

.text-slide span {
padding: 0 20px;
}


/*btn1（ボタン）
---------------------------------------------------------------------------*/
.btn1 a {
text-shadow: none;display: block;text-decoration: none;
background: var(--primary-color);/*背景色。冒頭のprimary-colorを読み込みます。*/
color: var(--primary-inverse-color);/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
font-size: 1.4rem;/*文字サイズ。140%に。*/
padding: 0.5rem 2rem;/*ボタン内の余白。上下、左右へ。*/
border-radius: 100px;/*角を丸くする*/
text-align: center;/*テキストをセンタリング*/
}

/*bg-primary-colorの上で使う場合*/
.bg-primary-color .btn1 a {
background: var(--primary-inverse-color);/*背景色。冒頭のprimary-inverse-colorを読み込みます。*/
color: var(--primary-color);/*文字色。冒頭のprimary-colorを読み込みます。*/
}

/*マウスオン時*/
.btn1 a:hover {
opacity: 1;
transform: scale(1.05);/*105%に拡大*/
background: var(--primary-inverse-color);/*背景色。冒頭のprimary-inverse-colorを読み込みます。*/
color: var(--primary-color);/*文字色。冒頭のprimary-colorを読み込みます。*/
}

/*bg-primary-colorの上で使う場合*/
.bg-primary-color .btn1 a:hover {
background: #fff;/*背景色*/
color: #333;/*文字色*/
}

/*矢印アイコン*/
.btn1 a::after {
font-family: "Font Awesome 6 Free";/*Font Awesomeを使う指示*/
content: "\f0a9";/*使いたいアイコン名（Font Awesome）をここで指定*/
font-weight: bold;/*この手の設定がないとアイコンが出ない場合があります*/
margin-left: 0.5em;/*アイコンとテキストとの間に空けるスペース*/
}


/*bg-primary-color
---------------------------------------------------------------------------*/
.bg-primary-color {
background: var(--primary-color);/*背景色。冒頭のprimary-colorを読み込みます。*/
color: var(--primary-inverse-color);/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}

/*パターン背景
---------------------------------------------------------------------------*/
/*bg-pattern1*/
.bg-pattern1 {
background-image: url("../images/bg_pattern2.png");/*背景パターンの読み込み*/
background-repeat: repeat;
background-position: center top;
background-size: 30px;/*サイズ*/
margin: 0 calc(50% - 50vw);
background-attachment: fixed;
background-color: #f3f3f3;
}



/*ボックス下部を三角形（▼）にする場合。三角形の高さ自体はmask-imageのd=の中にある２つの「95」という数値で変更できます。小さいほど角度が大きくなります。
---------------------------------------------------------------------------*/
.arrow {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 L100,95 L50,100 L0,95 Z' fill='%23000000'/%3E%3C/svg%3E");
mask-size: 100% 100%;
mask-repeat: no-repeat;
}

/*画面幅700px以上の追加指定*/
@media screen and (min-width:700px) {

/*三角形の高さの再設定。95を90に変更しています。*/
.arrow {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 L100,90 L50,100 L0,90 Z' fill='%23000000'/%3E%3C/svg%3E");
padding-bottom: 150px;
}


}/*追加指定ここまで*/


/*背景色が切れているのが見えないように微調整*/
.arrow + section {
padding-top: calc(var(--space-large) + 150px);
margin-top: -150px;
}


/*list-grid-simple（制作実績ブロック）
---------------------------------------------------------------------------*/
.list-grid-simple .list * {margin: 0;padding: 0;}

/*listブロック全体を囲むブロック*/
.list-grid-simple {
display: grid;
grid-template-columns: repeat(2, 1fr);/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
gap: 3rem;/*ブロックの間に空けるマージン的な指定*/
}

/*ボックス１個あたり*/
.list-grid-simple .list {
display: grid;
position: relative;
}

/*h4見出し*/
.list-grid-simple .list h4 {
margin-top: 0.5rem;/*上に0.5文字分のスペースを空ける*/
font-weight: normal;/*太さを標準に*/
}

/*画面幅800px以上の追加指定*/
@media screen and (min-width:800px) {

/*listブロック全体を囲むブロック*/
.list-grid-simple {
grid-template-columns: repeat(3, 1fr);/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
}

}/*追加指定ここまで*/


/*list-grid1（３カラムボックス）
---------------------------------------------------------------------------*/
.list-grid1 .list * {margin: 0;padding: 0;}

/*画面幅800px以上の追加指定*/
@media screen and (min-width:800px) {

/*listブロック全体を囲むブロック*/
.list-grid1 {
display: grid;
grid-template-columns: repeat(3, 1fr);/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
gap: 3vw;/*ブロックの間に空けるマージン的な指定*/
}

}/*追加指定ここまで*/


/*ボックス１個あたり*/
.list-grid1 .list {
display: grid;
margin-bottom: 3rem;/*ボックスの下に空けるスペース*/
position: relative;
border-radius: 5px;/*角を少しだけ丸く*/
background: #fff;/*背景色*/
color: #333;/*文字色*/
box-shadow: 2px 5px 5px rgba(0,0,0,0.1);/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.1は色が10%出た状態。*/
padding: 2rem;/*ボックス内の余白。２文字分。*/
}

/*画面幅800px以上の追加指定*/
@media screen and (min-width:800px) {

/*ボックス１個あたり*/
.list-grid1 .list {
margin-bottom: 0;/*下に空けるスペースをなくす*/
}

}/*追加指定ここまで*/


/*bg-black内のボックスへの追加設定*/
.list-grid1 .list.bg-black {
background: #111;/*背景色*/
color: #fff;/*文字色*/
}

/*ナンバー（01〜03の飾り番号）*/
.num {
position: absolute;
left: -20px;/*左からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
top: -30px;/*上からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
font-size: 60px;/*文字サイズ*/
line-height: 1;
font-family: "Noto Sans JP", sans-serif;
opacity: 0.2;/*透明度。色を20%出す。*/
}

/*引用符（“）の装飾*/
.list-grid1 .list h4.kazari::before {
content: "“";/*わかりづらいですが、中央にあるのが引用符でこの文字を出力しています。*/
position: absolute;
left: -1rem;/*左からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
top: -40px;/*上からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
opacity: 0.2;/*透明度。色を20%出す。*/
font-size: 60px;/*文字サイズ*/
line-height: 1;
}

/*ボックス内のh4見出し*/
.list-grid1 .list h4 {
font-size: 1.4rem;/*文字サイズを140%に*/
line-height: 1.6;/*行間*/
margin-bottom: 1rem;/*下に１文字分のスペースを空ける*/
position: relative;
}

/*ボックス内のp要素*/
.list-grid1 .list p {
font-size: 0.9rem;/*文字サイズを90%に*/
line-height: 1.6;/*行間*/
font-weight: normal;
}

/*bg-black内のp要素への追加設定*/
.list-grid1 .list.bg-black p {
color: #999;/*文字色*/
}

/*ボックス内のfigure画像*/
.list-grid1 .list figure.icon {
margin: 0 auto;
width: 100px;/*画像サイズ*/
margin-top: -40px;/*本来の場所より上にずらす*/
}

/*bg1内のfigureへの追加設定*/
.bg1 .list-grid1 .list figure.icon {
filter: grayscale(100%) brightness(90%);/*画像をグレースケールにし、明るさも少し暗くする。そのままの画像色を出したければこの１行を削除。*/
margin-bottom: 1rem;/*下に１文字分のスペースを空ける*/
}

/*画面幅800px以上の追加指定*/
@media screen and (min-width:800px) {

/*ボックス内のfigure画像*/
.list-grid1 .list figure.icon {
width: 150px;/*画像サイズ*/
margin-top: -50px;/*本来の場所より上にずらす*/
}

}/*追加指定ここまで*/



/*list-c2（お問い合わせ、資料請求）
---------------------------------------------------------------------------*/
.list-c2 > a {
text-decoration: none;
display: block;
}

/*画面幅600px以上の追加指定*/
@media screen and (min-width:600px) {

/*２つのボックスを囲むボックス*/
.list-c2 {
display: flex;/*横並びにする*/
gap: 2vw;/*ブロックの間に空けるマージン的な指定*/
}

}/*追加指定ここまで*/


/*ボックス１個あたり*/
.list-c2 .list {
text-align: center;
position: relative;
overflow-y: hidden;
color: #fff;/*文字色*/
text-shadow: 0px 0px 10px rgba(0,0,0,0.6);/*テキストの影。右へ、下へ、ぼかす量、0,0,0は黒のことで0.6は色が出た状態。*/
padding: 5rem 2rem;/*上下、左右へのボックス内の余白*/
margin: 1rem 0;/*上下、左右へのマージン*/
border-radius: 30px;/*角を丸くする指定*/
}

/*画面幅600px以上の追加指定*/
@media screen and (min-width:600px) {

.list-c2 > * {
flex: 1;
}
.list-c2 .list {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.list-c2 > a .list {
height: 100%;
}

/*1つ目のボックス（お問い合わせ）*/
.list-c2 .list:nth-of-type(1) {
border-radius: 0px 30px 30px 0px;/*角丸の上書き。左上、右上、右下、左下への順番。*/
}

/*2つ目のボックス（資料請求）*/
.list-c2 .list:nth-of-type(2) {
border-radius: 30px 0px 0px 30px;/*角丸の上書き。左上、右上、右下、左下への順番。*/
}

}/*追加指定ここまで*/


/*左側ボックスの背景*/
.list-c2 .list.image1 {
background: url("../images/bg_contact.jpg") no-repeat center center / cover;
}

/*右側ボックスの背景*/
.list-c2 .list.image2 {
background: url("../images/bg_request.jpg") no-repeat center center / cover;
}

/*h4見出し*/
.list-c2 h4 {
line-height: 1.2;/*行間を狭く*/
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 300;/*フォントの太さ。100〜900の間で指定が可能。大きいほど太くなります。*/
}

/*h4見出し内のメインテキスト（main-text）*/
.list-c2 h4 .main-text {
display: block;
font-size: 3rem;/*文字サイズ。3倍。*/
padding-top: 1.5rem;/*上に空ける余白*/
padding-bottom: 3rem;/*下に空ける余白*/
}

/*画面幅600px以上の追加指定*/
@media screen and (min-width:600px) {

.list-c2 h4 .main-text {
font-size: 4rem;/*文字サイズ。4倍。*/
}

}/*追加指定ここまで*/


/*テキスト*/
.list-c2 .list .text {
position: relative;z-index: 1;
font-size: 0.85rem;/*文字サイズ85%*/
}

/*マウスオン用のアニメーション*/
.list-c2 .list::before {
content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
background: rgba(0,0,0,0.6);/*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
transition: transform 0.3s 0.1s;/*アニメーションの速度（0.3秒）と待機時間（0.1秒）。*/
}
.list-c2 .list:hover::before {
transform: translateY(100%);/*マウスオンで半透明の黒を枠外へ出す。-100%にすると逆に移動します。*/
}


/*背景画像が少しずつ上に移動する
---------------------------------------------------------------------------*/
/*ブロック全体*/
.bg-slideup {
margin-left: calc(-1 * var(--space-large));
margin-right: calc(-1 * var(--space-large));
}

section > .bg-slideup:first-child {
margin-top: calc(-1 * var(--space-large));
}

/*画像ボックス*/
.bg-slideup .image {
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding: 10vw 20px;/*上下、左右へのボックス内の余白。画面幅100% = 100vwです。*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 3rem;/*英語テキストと日本語テキストの間のスペース。３文字分。*/
color: #fff;/*文字色*/
}

/* 英語テキスト */
.en-text {
writing-mode: horizontal-tb;
font-size: 0.8rem;/*文字サイズ80%*/
}

/* 日本語テキスト */
.jp-text {
writing-mode: vertical-rl;
text-orientation: upright;
}

/*制作実績ブロックの画像指定*/
#products .bg-slideup .image {
background-image: url("../images/bg_works.jpg");/*背景画像の指定*/
}

/*会社概要ブロックの画像指定*/
#company .bg-slideup .image {
background-image: url("../images/bg_company.jpg");/*背景画像の指定*/
}







/*list-normal1（「お客様の声」「制作の流れ」ブロックで使用）
---------------------------------------------------------------------------*/
.list-normal1 * {margin: 0;padding: 0;}

/*画面幅600px以上の追加指定*/
@media screen and (min-width:600px) {

/*テキストブロック*/
.list-normal1 .text {
flex: 1;
}

/*画像とテキストの左右を入れ替えたい場合（600px以上のみ使用可能）*/
.reverse {
flex-direction: row-reverse;
background-position: left bottom !important;
}

}/*追加指定ここまで*/


/*ブロック１個あたり*/
.list-normal1 .list {
background: var(--base-color) url("../images/bg-dot.png") no-repeat right bottom / 200px;
color: var(--base-inverse-color);/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
padding: 3rem;
margin-bottom: 2rem;
box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
position: relative;
}

/*画面幅600px以上の追加指定*/
@media screen and (min-width:600px) {

/*ブロック１個あたり*/
.list-normal1 .list {
display: flex;
gap: 2rem;/*画像とテキストの間のスペース。２文字分。画像がない場合はこれは適用されません。*/
}

}/*追加指定ここまで*/


/*画像ブロック*/
.list-normal1 figure {
width: 30%;/*幅*/
margin-bottom: 1rem;/*下に空けるスペース*/
}

/*画面幅600px以上の追加指定*/
@media screen and (min-width:600px) {

/*画像の下マージンのリセット*/
.list-normal1 figure {
margin-bottom: 0;
}

}/*追加指定ここまで*/


/*h4見出し*/
.list-normal1 h4 {
font-size: 1.2rem;/*文字サイズ200%*/
line-height: 1.5;/*行間*/
margin-bottom: 1rem;/*下に空けるスペース*/
}

/*画面幅600px以上の追加指定*/
@media screen and (min-width:600px) {

.list-normal1 h4 {
font-size: 2rem;/*文字サイズ200%*/
line-height: 1.8;/*行間*/
}

}/*追加指定ここまで*/


/*h4内にアイコンを配置した場合（制作の流れの見出し左のアイコン）*/
.list-normal1.flow h4 i {
margin-right: 1rem;/*アイコンとテキストとの間の余白*/
}

/*名前*/
.list-normal1 .name {
text-align: right;/*右寄せ*/
margin-top: 1rem;/*上に空けるスペース*/
}

/*制作の流れで使用しているブロック間の「▼」の矢印*/
.list-normal1.flow .list::after {
content: "▼";/*このテキストを出力します*/
position: absolute;
left: 50%;/*左からの配置場所。厳密ではありませんが、文字が小さいので問題ないかと。*/
bottom: -2rem;/*下からの配置場所。マイナスがつくので本来の場所とは逆向きに移動。*/
transform: scaleX(1.5);/*横幅を150%に*/
opacity: 0.5;/*透明度。色が50%出た状態。*/
}

/*最後のボックスだけ下矢印を出さない*/
.list-normal1.flow .list:last-child::after {
content: none;
}


/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
font-weight: bold;/*太字に*/
padding: 0.5rem 1rem;/*ボックス内の余白*/
background: var(--base-inverse-color);/*背景色*/
color: var(--base-color);/*文字色*/
margin-bottom: 1rem;/*下に空けるスペース*/
border-radius: 5px;/*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta1 {
table-layout: fixed;
width: 100%;/*幅*/
border-top: 1px solid #ccc;/*テーブルの一番上の線。幅、線種、色*/
margin-bottom: 2rem;/*テーブルの下に空けるスペース。２文字分。*/
}
/*tr（１行分）タグ設定*/
.ta1 tr {
border-bottom: 1px solid #ccc;/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 td, .ta1 th {
word-break: break-all;
background: var(--base-color);/*背景色。冒頭のbase-colorを読み込みます。*/
color: var(--base-inverse-color);/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
text-align: left;/*左よせにする*/
padding: 0.5rem;/*余白*/
}

/*th（左側）のみの設定*/
.ta1 th {
width: 25%;/*幅*/
text-align: center;/*テキストをセンタリング*/
}


/*テーブル（プラン）　※基本的な設定は上のta1で設定
---------------------------------------------------------------------------*/
.ta1.plan, .ta1.plan td, .ta1.plan th {
text-align: center;
border: 2px solid var(--base-inverse-color);/*テーブルの枠線の幅、線種、varは色のことで冒頭のbase-inverse-colorを読み込みます*/
padding: 0.5rem;
}

/*画面幅801px以上の追加指定*/
@media screen and (min-width:801px) {

.ta1.plan, .ta1.plan td, .ta1.plan th {
font-size: 1.2rem;
padding: 2rem 1rem;
}

}/*追加指定ここまで*/


/*一番左側の縦列の幅*/
.ta1.plan th:first-child,
.ta1.plan td:first-child {
width: 12rem;/*目安としては約12文字分。*/
}

/*１行目のプランブロック*/
.ta1.plan th {
width: auto;
position: relative;
overflow: hidden;
}

/*１行目のプランブロック内の「おすすめ」表示*/
.ta1.plan th .osusume {
position: absolute;
left: 0px;
top: 0px;
background: #ff0000;/*背景色*/
color: #fff;/*文字色*/
font-size: 0.8rem;/*文字サイズ80%*/
width: 120px;
text-align: center;
padding-top: 43px;
padding-bottom: 2px;
transform: rotate(-45deg) translate(-18px, -60px);
}

/*１行目のプランブロック内のアイコン（王冠マーク）*/
.ta1.plan th i {
display: block;
font-size: 1.4rem;/*サイズ*/
}

/* 左から2つ目の「エコノミープラン」の見出し（th）に背景色を設定 */
.ta1.plan th:nth-child(2) {
background: #fffcda;
}
/* 左から2つ目の「エコノミープラン」の列（td）に背景色を設定 */
.ta1.plan td:nth-child(2) {
background: #fffcda;
}

/* 左から３つ目の「スタンダードプラン」の見出し（th）に背景色を設定 */
.ta1.plan th:nth-child(3) {
background: var(--primary-color);/*背景色。冒頭のprimary-colorを読み込みます。*/
color: var(--primary-inverse-color);/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}
/* 左から３つ目の「スタンダードプラン」の列（td）に背景色を設定 */
.ta1.plan td:nth-child(3) {
background: var(--primary-color);/*背景色。冒頭のprimary-colorを読み込みます。*/
color: var(--primary-inverse-color);/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}

/* 左から４つ目の「プレミアムプラン」の見出し（th）に背景色を設定 */
.ta1.plan th:nth-child(4) {
background: #fffcda;
}
/* 左から４つ目の「プレミアムプラン」の列（td）に背景色を設定 */
.ta1.plan td:nth-child(4) {
background: #fffcda;
}

/*１行目の金額*/
.plan th > span {
display: block;
font-size: 1.6rem;/*文字サイズを160%*/
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 700;/*太さ。200〜900まで指定できます。数値が大きいほど太くなる。*/
}

/*画面幅801px以上の追加指定*/
@media screen and (min-width:801px) {

/*１行目の金額*/
.plan th > span {
font-size: 2.4rem;/*文字サイズを240%*/
}

}/*追加指定ここまで*/


/*画面幅800px以下の追加指定*/
@media screen and (max-width:800px) {

.scroll .ta1.plan {width: 700px;}
.scroll {overflow-x: auto;}

}/*追加指定ここまで*/


/*調整用スタイル
---------------------------------------------------------------------------*/
.padding0 {
padding: 0 !important;
}
.padding-lr0 {
padding-left: 0 !important;
padding-right: 0 !important;
}


/*マニュアルページ用
---------------------------------------------------------------------------*/
#manual .container {
all: unset;
}
.manual {
background: #fff;
color: #333;
padding: 5vw;
}
.manual .look {background: #eee;}
.manual h2 {
margin-top: 2rem;
font-size: 2rem;
text-align: center;
}
.manual h3 {
line-height: 3;
margin-top: 2rem;
}
.manual h3 span {
background: linear-gradient(transparent 60%, yellow);
}
.manual h3 + p {margin-top: -0.5rem;}
.manual.margin-left {padding-left: 300px;}




/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #ff0000 !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb-space-large {margin-bottom: var(--space-large) !important;}
.look {line-height: 1.5 !important; display: inline-block;padding: 5px 10px;background: rgba(0,0,0,0.1);border: 1px solid rgba(0,0,0,0.3);border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}
.inline-block {display: inline-block !important;}
.relative {position: relative;}
.marker {background: linear-gradient(transparent 50%, yellow);}
pre {white-space: pre-wrap;word-wrap: break-word;overflow-wrap: break-word;}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

.ws {width: 48%;display: inline;}
.sh {display: none;}
.pc {display: block;}

}/*追加指定ここまで*/




@media screen and (max-width:1100px) {



header,
.container {
width: 90%;
}

.st_right {
left: 50%;
}

#mainimg,
body.sub{
background-position: 400px -350px;
}

.top_ser_flex {
display: flex;
gap: 100px;
justify-content: space-between;
}

.main_left {
position: absolute;
top: 90px;
left: 50px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}

p.top_jp {
font-size: 3em;
line-height: 1.3;
}

p.top_en {
font-size: 1em;
font-weight: 600;
color: #747474;
}

.ser_cont {
display: flex;
justify-content: space-between;
flex-direction: row;
width: 100%;
padding: 50px 0px;
border-bottom: 1px solid #333333;
align-items: center;
}

.ser_cont img {
height: auto;
width: 46%;
}

dl#company, .ceo, .mvv_cont {
width: 100%;
margin: 1px auto;
}

}



@media screen and (max-width:900px) {

#stalker,
#cursor{
  display: none;
}

footer div:nth-of-type(2) {
    flex: 1;
    display: flex;
    gap: 2rem;
    justify-content: space-evenly;
}

#mainimg, body.sub {
background-position: 200px -350px;
}

.img.rtl{
animation-duration: 91.4286s!important;
width: 600.143%!important;
}

.top_ser_flex {
display: flex;
gap: 0px;
justify-content: space-between;
flex-direction: column;
}

.top_ser_ic_flex {
margin-top: 80px;
align-content: flex-start;
align-items: flex-start;
background: rgba(0, 0, 0, 0.0);
flex: none;
flex-direction: row;
flex-wrap: wrap;
height: auto;
justify-content: space-around;
width: 100%;
display: flex;
}

.ser_icon {
flex: none;
flex-direction: column;
flex-wrap: nowrap;
height: auto;
justify-content: space-between;
margin: 0px 20px 80px;
width: calc(50% - 40px);
max-width: calc(45% - 40px);
display: flex;
align-items: flex-start;
}

.ts_right{
width: 100%;
}

#mainimg {
background-position: 300px -350px;
background-size: 950px;
padding-top: 80vh;
}

.only_pc{
display: none;
}

.only_sp{
display: block;
}

#header{
padding:0
}

.menu{
display:none
}

.HeadCaption{
height:70vw
}

.HeadCaption_in{
width:90%;
font-size:5.5vw;
bottom:2em
}

.hamburger-menu{
display:inline
}

.menu-btn{
position:fixed;
top:15px;
right:20px;
display:flex;
height:50px;
width:50px;
justify-content:center;
align-items:center;
z-index:9999!important;
background-color:#ffffff00;
border-radius:50%
}



.menu-btn span,
.menu-btn span:before,
.menu-btn span:after{
content:'';
display:block;
height:2px;
width:25px;
border-radius:3px;
background-color:#e6007e;
position:absolute
}

.menu-btn span:before{
bottom:8px
}

.menu-btn span:after{
top:8px
}

#menu-btn-check:checked ~ .menu-btn span{
background-color:rgba(255,255,255,0)

}

#menu-btn-check:checked ~ .menu-btn span::before{
bottom:0;
transform:rotate(45deg);
background-color: #ffffff;
}

#menu-btn-check:checked ~ .menu-btn span::after{
top:0;
transform:rotate(-45deg);
background-color: #ffffff;
}

#menu-btn-check{
display:none
}

.menu-content{
width:100%;
height:100vh;
position:fixed;
top:0;
left:0;
z-index:80;
background-color:#3584bb
}

.menu-content ul{
padding:70px 10px
}

.menu-content ul li{
border-bottom:solid 1px #ffffff;
list-style:none
}

.menu-content ul li a{
display:block;
width:100%;
font-size:17px;
box-sizing:border-box;
color:#ffffff;
text-decoration:none;
padding:9px 15px 10px 0;
position:relative;
padding-left:2em;
line-height: 1.5;
}

.menu-content ul li a::before{
content:"";
width:8px;
height:8px;
border-top:solid 2px #ffffff;
border-right:solid 2px #ffffff;
transform:rotate(45deg);
position:absolute;
left:11px;
top:18px
}

.menu-content ul li span{
padding:0 0 0 1.5em;
display:block
}

.menu-content{
width:100%;
height:100%;
position:fixed;
top:0;
left:100%;
z-index:80;
background-color:#e6007eeb;
transition:all .5s;
overflow:scroll
}

#menu-btn-check:checked ~ .menu-content{
left:0

}


div#content2{
max-width:94%;
margin:auto;
padding-top:90px
}

section#content{
max-width:94%;
margin:auto
}

#menubar a{
padding:0 10px
}

#menubar a{
display:block;
text-decoration:none;
padding:0 8px;
font-size:20px;
color:#333
}

.tsuyomitext p{
margin-bottom:10px;
font-size:15px
}

.tsuyomitext h3{
font-size:20px
}

.tsuyomitext{
width:50%;
padding:20px;
background-color:#fff
}


.workcomment {
width: 90%;
margin: auto;
}


.tel{
display:none
}

picture.telimg{
display:block
}

figure#ighead{
display:flex;
align-items:center;
width:35%;
justify-content:flex-end
}

header{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:nowrap;
flex-direction:row;
max-width:100%;
margin:auto;
position: fixed;
}

dl#company, .ceo, .mvv_cont {
width: 100%;
margin: 0 auto;
}

}


@media screen and (max-width:750px) {

  body.sub {
     background-image:none;
  }

  body.sub::before {
  content:"";
   display:block;
   position:fixed;
   top:0;
   left:0;
   z-index:-1;
   width:100%;
   height:100vh;
     background-image: url(../images/spbg.png);
         background-size: cover;
         background-repeat:no-repeat;
         background-position:50% 100%;
  }


#mainimg,
body.sub {
background-position: 150px -350px;
background-size: 900px;
}

.top_contact {
background-position-y: 0px;
border-radius: 20px;
}

.abouttop .com_bt_flex a {
width: 47%;
}

.abouttop .com_bt_flex {
gap: 20px;
}

h4.ceo_title {
font-size: 50px;
font-weight: 500;
color: #e6007e;
margin: 0;
line-height: 1.6;
}

}


@media screen and (max-width:550px) {

.ser_cont {
display: flex;
flex-direction: column;
}

.ser_cont:nth-child(2n) {
flex-direction: column-reverse;
}

.ser_clum,
.ser_cont img  {
width: 100%;
}

h2.sub_title_en {
font-size: 50px;
margin: 0;
line-height: 1;
margin-top: 0px;
color: #e6007e;
}

.com_cont {
display: flex;
flex-direction: column;
padding: 10px 0;
}

.com_cont dt {
width: 150px;
font-weight: 600;
color: #e6007e;
}

.com_bt_flex a {
width: 90%;
}

h4.ceo_title {
font-size: 35px;
}

p.ceo_text, p.mvv_text {
font-size: 16px;
line-height: 25px;
margin: 0;
margin-top: 20px;
font-weight: normal;
}

p.val_txt {
margin: 0;
margin-top: 30px;
font-size: 16px;
line-height: 1.4;
font-weight: 400;
}

.abouttop .com_bt_flex a {
width: 90%;
}
.ceo_name img {
width: 150px;
}

h4.mvv_title {
font-size: 50px;
}

.subtop_img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1280 / 480;
overflow: hidden;
border-radius: 16px;
margin-top: 40px;
}

.mvv_flex a {
font-size: 15px;
}

.mvv_cont h4 {
font-size: 35px;
font-weight: 500;
color: #000000;
margin: 0;
line-height: 1.2;
}

.com_bt_flex {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
gap:20px;
}

.com_cont ul {
padding-left: 1em;
}

section {
overflow-x: hidden;
padding: 50px 0px;
}

.top_ser_ic_flex {
margin-top: 80px;
align-content: flex-start;
align-items: flex-start;
background: rgba(0, 0, 0, 0.0);
flex: none;
flex-direction: column;
flex-wrap: nowrap;
height: auto;
justify-content: space-around;
width: 100%;
display: flex;
}

#mainimg {
padding-top: 80vh;
}

.ser_icon {
flex: none;
flex-direction: column;
flex-wrap: nowrap;
height: auto;
justify-content: space-between;
margin: 0px 20px 50px;
width: calc(100% - 40px);
max-width: calc(100% - 40px);
display: flex;
align-items: center;
}

p.ic_en {
margin-top: 5px;
font-size: 15px;
color: #999999;
}

.img.rtl {
animation-duration: 130.4286s !important;
width: 2000.143% !important;
}

p.contact_title {
font-size: 25px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
color: #ffffff;
margin-top: 0px;
flex-direction: column;
}

.top_contact {
padding: 20px;}

p.ic_jp {
margin-top: 10px;
font-size: 24px;
}

p.ic_tx {
margin-top: 15px;
font-size: 16px;
line-height: 1.6;
}


#mainimg,
body.sub {
background-position: -30px -200px;
background-size: 700px;
}

p.inner_text_big {
font-size: 36px;
line-height: 1.3;
margin: 0;
}

img.com_bt {
margin-bottom: 5px;
}

.main_left {
position: absolute;
top: 100px;
left: 0px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

p.top_jp {
font-size: 55px;
line-height: 1.3;
text-align: left;
}

p.top_en {
font-size: 20px;
font-weight: 600;
color: #747474;
}

#mainimg .fv_btn {
width: 80%;
}

h2.about {
font-size: 60px;
}

.st_right {
position: absolute;
width: 350px;
top: -10px;
left: 150px;
}

.top_about .btn {
text-align: center;
}

}


@media screen and (max-width:350px) {
p.top_jp {
font-size: 50px;}

.fv_btn a,
.more2 {
font-size: 15px;
}

p.contact_title {
font-size: 20px;
}

p.contact_txt {
font-size: 11px;}


}


html,body,a{
cursor: none;
}

/*カーソル*/
#cursor{
transform: translate(0,0);
pointer-events: none;
position: fixed;
top: -4px;
left: -4px;
width: 8px;
height: 8px;
background: rgba(0,0,0,0.75);
border-radius: 50%;
z-index: 999;
transition: width .3s, height .3s, top .3s, left .3s;
}
/*マウスストーカー*/

#stalker {
pointer-events: none;
position: fixed;
top: -18px;
left: -18px;
width: 36px;
height: 36px;
background: rgba(21,50,82,0.1);
border-radius: 50%;
transition: transform 0.2s, top, 0.5s, left 0.5s, width .5s, height .5s, background-color .5s;
transition-timing-function: ease-out;
z-index: 999;
&.hov_{
top: -40px;
left: -40px;
width: 80px;
height: 80px;
transition: .5s;
background: rgba(255, 0, 255, 0.8);
mix-blend-mode: difference;
cursol:pointer;
}
}