html{
overflow-x: hidden;
}

body{
line-height: 1.8;
font-family:  "游ゴシック, ヒラギノ角ゴ ProN W3", HiraKakuProN-W3,  "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
color: #fb467d;
background-color: #fff;
background-attachment: fixed;
overflow-x: hidden;
}

p{
margin:  10px 0;
font-size: 1em;
}

.pc{display:block;}
.sp{display:none;}
.ssp{display:none;}

img {
max-width:100%;
vertical-align: bottom;
}

ul li{
line-height: 1.8;
}

ul.br{
margin-left: 1.4em;
text-indent: -1.4em;
}

small{font-size: 0.6;}

a{
color: #fb467d;
text-decoration: underline;
word-break: break-all;
}

a:hover{
text-decoration: none;
}

a img{
transition:0.5s;
}

a img:hover{
opacity: 0.5 ;
}

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

.cf:after {
clear: both;
}

.cf {
*zoom: 1;
}

.fadein_c {
opacity : 0;
transform : translate(0, 0);
transition : all 1500ms;
}
.fadein_c.scrollin {
opacity : 1;
transform : translate(0, 0);
}
.fadein{
opacity : 0;
transform : translate(0, 50px);
transition : all 1500ms;
}

.fadein.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.fadein02 {
opacity : 0;
transform : translate(-150px, 0);
transition : all 1500ms;
}
.fadein02.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.fadein03 {
opacity : 0;
transform : translate(150px, 0);
transition : all 1500ms;
}
.fadein03.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.dli-external-link {
display: inline-block;
color: #fb467d;
line-height: 1;
width: 0.5em;
height: 0.5em;
border: 0.1em solid currentColor;
border-radius: 0.1em;
background: none;
box-sizing: content-box;
position: relative;
margin: 0 5px
}

.dli-external-link > span {
position: absolute;
top: -0.25em;
right: -0.28em;
width: 45%;
height: 45%;
border: 0.1em solid currentColor;
border-bottom: 0;
border-left: 0;
background: none;
box-shadow: -0.1em 0.1em 0 0.1em none;
box-sizing: border-box;
}

.dli-external-link > span::before {
content: '';
position: absolute;
top: 0.06em;
width: 0.05em;
height: 0.6em;
background: currentColor;
transform: rotate(45deg);
transform-origin: top center;
}

.dli-external-link-event {
display: inline-block;
vertical-align: middle;
color: #fb467d;
line-height: 1;
width: 0.5em;
height: 0.5em;
border: 0.1em solid currentColor;
border-radius: 0.1em;
background: #fff;
box-sizing: content-box;
position: relative;
margin: 0 5px
}

.dli-external-link-event > span {
position: absolute;
top: -0.1em;
right: -0.1em;
width: 40%;
height: 40%;
border: 0.1em solid currentColor;
border-bottom: 0;
border-left: 0;
background: #fb467d;
box-shadow: -0.1em 0.1em 0 0.1em #fff;
box-sizing: border-box;
}

.dli-external-link-event > span::before {
content: '';
position: absolute;
top: -0.05em;
right: -0.1em;
width: 0.1em;
height: 0.5em;
background: currentColor;
transform: rotate(45deg);
transform-origin: top center;
}

.center{
text-align: center;	
}

h2{
text-align: center;
margin-bottom: 100px;
}

h3{
color: #fff;font-size: 30px;
text-align: center;
margin: 0 0 30px;
}

h4 {
position: relative;
padding: .7em 1.3em;
color: #ffffff;
text-align: center;
font-size: 1.1em
}

h4::before,
h4::after {
display: inline-block;
position: absolute;
width: 1em;
height: 1em;
content: '';
}

h4::before {
top: 0;
left: 0;
border-top: 3px solid #ffffff;
border-left: 3px solid #ffffff;
}

h4::after {
bottom: 0;
right: 0;
border-bottom: 3px solid #ffffff;
border-right: 3px solid #ffffff;
}

hr{
margin: 30px 0;
background-color: #fb467d;
height: 2px;
border: none;
}

.bg-wh{
width: 100%;
background-color: #fff;
}

#loading svg{
width:30%;
}

/* main_area */

.main_area{
background: url("../images/img_main_mv_pc.jpg") 0 no-repeat #fff;
position:relative;
width:1200px;
margin: 0 auto;
padding-top: 838px;
margin-top: 0;
z-index: 1;
}

.main_area_inner{
position:absolute;
width: 1200px;
margin: 0 auto;
top: 0px;
}

.img-main-01{
position: absolute;
right:58%;
width:32%;
margin-top:28%;
z-index:0;
opacity : 0;
transform : translate(50, 0px);
transition : all 1000ms;
}

.img-main-01.act{
opacity : 1;
transform : translate(0, 0);
}

/* area_bnr*/

.area_bnr{
width: 100%;
margin: 0 auto 100px;
padding: 50px 0;
background-color: #fff;
}

.area_bnr_inner{
width: 1220px;
margin: 0 auto;
}

.img_box{
margin: 10px;
}

/* area_news */

.area_news{
width: 100%;
margin: -100px auto 0;
padding-top: 100px;
padding-bottom: 250px;
background-color: #fff;
}

.area_news_inner{
width: 800px;
margin: 0 auto;
}

.area_news a{
color: #fb467d;
}

.area_news table{
width: 100%;
border: solid 1px #fb467d;
}

.area_news table tr>*{
padding: 2% 2% 0;
}

.area_news table tr:last-child>*{
padding: 2%;
}

.area_news table td{
width: 60%;
}

/* area_profile */

.area_profile{
width: 100%;
margin: -100px auto 600px;
padding-top: 100px;
padding-bottom: 150px;
background-color: #fb467d;
color: #fff;
}

.area_profile_inner{
width: 1200px;
margin: 0 auto;
}

.area_profile ul{
padding: 0;
list-style: none;
margin: 0;
}

.area_profile ul li{
float: left;
}

.area_profile ul.img_profile li{
width: 45%;
margin-right: 10%;
}

.area_profile ul.img_profile li:last-child{
margin-right: 0;
}

.area_profile ul.sns_profile{
width: 50%;
margin:30px 25%;
}

.area_profile ul.sns_profile li{
width: 16%;
margin-right:12%;
}

.area_profile ul.sns_profile li:last-child{
margin-right: 0;
}

.area_profile p{
line-height: 2.5em;
}

/* area_works */

.area_works{
width: 100%;
margin: -100px auto 0;
padding-top: 100px;
padding-bottom: 150px;
background-color: #fff;
}

.area_works_inner{
width: 1200px;
margin: 0 auto;
}

.works_year p.number{
font-size: 24px;
font-weight:bold;
}

.tab {
display: flex;
flex-wrap: wrap;
gap: 0 5px;
max-width: 1200px;
}

.woks_category{
height: 500px;
overflow:auto;
}

.woks_category::-webkit-scrollbar {
background: #FFC1D4;
width: 15px;
height: 15px;
border-radius: 20px;
}
.woks_category::-webkit-scrollbar-thumb {
background-color: #fb467d;
border: 2px solid #fff;
border-radius: 20px;
}
.woks_category::-webkit-scrollbar-thumb:hover {
background-color: #fff;
}

.tab > label {
flex: 1 1;
order: -1;
opacity: .5;
min-width: 70px;
padding: 1.6em 1em;
border-radius: 5px 5px 0 0;
background-color: #fb467d;
color: #fff;
font-size: .9em;
font-weight: bold;
text-align: center;
cursor: pointer;
}

.tab > label:hover {
opacity: .8;
}

.tab input {
display: none;
}

.tab > div {
display: none;
width: 100%;
padding: 1.5em 1em;
background-color: #fff;
}

.tab label:has(:checked) {
opacity: 1;
}

.tab label:has(:checked) + div {
display: block;
}

/* area_gallery */

.area_gallery{
width: 100%;
margin: -100px auto 600px;
padding-top: 100px;
padding-bottom: 150px;
background-color: #fff;
}

/* area_contact */

.area_contact{
width: 100%;
margin: -100px auto 0;
padding-top: 100px;
padding-bottom: 150px;
background-color: #fff;
}

.area_contact_inner{
width: 1200px;
margin: 0 auto;
}

.area_contact .contact_box{
width: 60%;
margin: 0 20%;
padding: 2% 0;
border: 2px solid #fb467d;
border-radius: 20px;
}

.area_contact .contact_box p{
text-align: center;
font-size: 24px;
position: relative;
}

.contact-btn {
cursor: pointer;
transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
background: #fb467d;
border: 2px solid #fb467d;
border-radius: 60px;
color: #fff;
display: block;
font-weight: bold;
max-width: 60%;
padding: 15px 20px;
margin: 30px 20%;
font-size: 20px;
}

.contact-btn img{
vertical-align: -10%;
margin-right: 10px;
}

.contact-btn img:hover{
opacity: 100%;
}

.contact-btn.press {
box-shadow: 0 4px 0 #c93864; 
text-align: center;
}

.contact-btn.press:hover {
transform: translateY(4px);
box-shadow: none;
}

.contact-btn.press a {
text-decoration: none;
color: #fff;
}

/* footer */

footer{
padding: 30px 0;
color: #fff;
background-color: #fb467d;
}

.footer_inner{
width: 1200px;
margin: 0 auto;
position: relative;
}

.footer_inner ul.sns_footer{
width: 140px;
margin: 30px auto;
padding: 0;
}

.footer_inner ul.sns_footer li{
width: 20px;
margin-right:20px;
float: left;
list-style: none;
}

.footer_inner ul.sns_footer li:last-child{
margin-right: 0;
}

/* totop */

#totop {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 1000;
line-height: .1;
cursor: pointer;
}

#totop {
display: none;
}

/* bg */

body:after {
content:'';
width:100%;
height:100vh;
display:block;
backgrond-repeat:no-repeat;
background-size:cover;
background-position: center;
position:fixed;
top:0;
left:0;
z-index:-1;
}
body.bg_01:after {
background-image:url('../images/bg_01.jpg');
}

body.bg_02:after {
background-image:url('../images/bg_02.jpg');
}

/*1250*/

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

.main_area{
background: url("../images/img_main_mv_pc.jpg") 0 no-repeat #fff;
background-size: contain;
position:relative;
padding-top: 69.8333333%;
width:100%;
margin-bottom: 50px;
}

.main_area_inner{
position:absolute;
top: 0px;
width:100%;
}

/* area_bnr*/

.area_bnr{
width: 100%;
margin: -100px auto;
padding-top: 100px;
padding-bottom: 100px;
}

.area_bnr_inner{
width: 100%;
margin: 0;
}

/* area_news */

.area_news{
width: 100%;
margin: -100px auto 0;
padding-top: 100px;
padding-bottom: 200px;
background-color: #fff;
}

/* area_profile */

.area_profile{
width: 100%;
margin: -100px auto 600px;
padding-top: 100px;
padding-bottom: 150px;
}

.area_profile_inner{
width: 94%;
margin: 0 3%;
}

/* area_works */

.area_works{
width: 100%;
margin: -100px auto 0;
padding-top: 100px;
padding-bottom: 150px;
}

.area_works_inner{
width: 94%;
margin: 0 3%;
}

.woks_category{
height: 500px;
}

/* area_contact */

.area_contact{
width: 100%;
margin: -100px auto 0;
padding-top: 100px;
padding-bottom: 150px;
}

.area_contact_inner{
width: 94%;
margin: 0 3%;
}

.area_contact .contact_box{
width: 80%;
margin: 0 10%;
padding: 2% 0;
}

/* footer */

.footer_inner{
width: 94%;
margin: 0 3%;
}

/* totop */

#totop {
width: 6%;
}

}

/*950*/

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

.main_area{
margin-top: 56px;
}

}

/*SP*/

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

#loading svg{
width:60%;
}

h2{
margin:0 0 50px;
}

h2 img{
width: 60%;
margin: 0 20%;
}

body{
font-size: 0.9em;
}

.pc{display:none;}
.sp{display:block;}

.main_area{
padding-top: 156.25%;
background: url("../images/img_main_mv_sp.jpg") 0 no-repeat #fff;
background-size: contain;
position:relative;
}

.img-main-01{
position: absolute;
left:15%;
width:70%;
margin-top:70%;
z-index:1;
opacity : 0;
transform : translate(50, 0px);
transition : all 1000ms;
}

.img-main-01.act{
opacity : 1;
transform : translate(0, 0);
}

/* area_bnr*/

.area_bnr{
padding-bottom: 100px;
}

/* area_news */

.area_news{
padding-bottom: 200px;
}

.area_news_inner{
width: 94%;
margin: 0 3%;
}

.area_news table td{
width: 70%;
}

.area_news table tr>*{
padding: 3% 3% 0;
}

.area_news table tr:last-child>*{
padding: 3%;
}

/* area_profile */

h3{
margin: 30px 0;
}

/* area_profile */

.area_profile{
margin: -100px auto 600px;
padding-bottom: 50px;
}

.area_profile ul.img_profile{
float: none;
}

.area_profile ul.img_profile li{
width: 100%;
margin-right: 0;
}

.area_profile ul.sns_profile{
width: 50%;
margin:30px 25%;
}

.area_profile ul.sns_profile li{
width: 16%;
margin-right:12%;
}

.area_profile ul.sns_profile li:last-child{
margin-right: 0;
}

.woks_category{
height: 400px;
}

/* area_works */

.area_works{
padding-bottom: 100px;
}

/* area_gallery */

.area_gallery{
padding-bottom: 100px;
}

/* area_contact */

.area_contact .contact_box{
width: 100%;
margin: 0 0;
padding: 2% 0;
border: 2px solid #fb467d;
border-radius: 20px;
}

.area_contact .contact_box p{
font-size: 1.2em;
}

.contact-btn {
max-width: 60%;
padding: 15px 40px;
margin: 30px 20%;
font-size: 0.8em;
}

.area_contact .contact-btn{
font-size: 0.9em;
}

.area_contact .contact-btn{
font-size: 1em;
}

.contact-btn img{
width: 20px;
vertical-align: -10%;
}

#totop {
width: 12%;
}

a img{
transition:none;
}

a img:hover{
opacity: 100%;
}

/* bg */

body:after {
content:'';
width:100%;
height:100vh;
display:block;
backgrond-repeat:no-repeat;
background-size:cover;
background-position: center;
position:fixed;
top:0;
left:0;
z-index:-1;
}
body.bg_01:after {
background-image:url('../images/bg_01_sp.jpg');
}

body.bg_02:after {
background-image:url('../images/bg_02_sp.jpg');
}
}

@media screen and (max-width: 500px) {
.tab > label {
font-size: 0.5em;
}
.ssp{display:block;}
h4 {
font-size: 1.3em
}	
}

/* SVG */

svg .svg-elem-1 {
stroke-dashoffset: 21.396541595458984px;
stroke-dasharray: 21.396541595458984px;
fill: transparent;
-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg-elem-1 {
stroke-dashoffset: 0;
fill: rgb(251, 70, 125);
}

svg .svg-elem-2 {
stroke-dashoffset: 3799.0751953125px;
stroke-dasharray: 3799.0751953125px;
fill: transparent;
-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .svg-elem-2 {
stroke-dashoffset: 0;
fill: rgb(251, 70, 125);
}

svg .svg-elem-3 {
stroke-dashoffset: 3333.960693359375px;
stroke-dasharray: 3333.960693359375px;
fill: transparent;
-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .svg-elem-3 {
stroke-dashoffset: 0;
fill: rgb(251, 70, 125);
}

svg .svg-elem-4 {
stroke-dashoffset: 1461.060302734375px;
stroke-dasharray: 1461.060302734375px;
fill: transparent;
-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

svg.active .svg-elem-4 {
stroke-dashoffset: 0;
fill: rgb(251, 70, 125);
}

svg .svg-elem-5 {
stroke-dashoffset: 1462.6175537109375px;
stroke-dasharray: 1462.6175537109375px;
fill: transparent;
-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}

svg.active .svg-elem-5 {
stroke-dashoffset: 0;
fill: rgb(251, 70, 125);
}

svg .svg-elem-6 {
stroke-dashoffset: 1159.21142578125px;
stroke-dasharray: 1159.21142578125px;
fill: transparent;
-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

svg.active .svg-elem-6 {
stroke-dashoffset: 0;
fill: rgb(251, 70, 125);
}

#loading{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
z-index:9999;

opacity:1;
transition: opacity 1s ease;
}

#loading.hide{
opacity:0;
pointer-events:none;
}