@charset "utf-8";

/*
Theme Name: 一条よしひろ
Template: blankslate
Author: 一条よしひろ
Version: 1.0
Updated: 2024-12-2
*/

*{margin: 0; padding: 0;}
html { width: 100%; height: 100%; scroll-behavior: smooth; }

:root {
 --purple-1: #7a2a76;
 --purple-2: #ac70a9;
 --purple-3: #792d75;
 --purple-4: #8a3c86;
 --white-1:#f1e8f1;
--black-1: #31023b;
--black-2: #292320;
--line: #06c755;

--orange-1: #E95412;
--orange-2: #F5D82E; 
--bg-purple: #E9F7FD;
--bg-yellow: #FFFBEC;
}

.purple{color: var(--purple-1);}
.squre{background-color: var(--bg-purple);}
.brpc{display: block;}
.brsp{display: none;}

.small{font-size: 80%;}


body{
    font: 400 17px "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",Meiryo, sans-serif;
    color: var(--black-1);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    }


.banner{position: fixed;width: 400px;bottom:-2px;right: 0;z-index: 4;}

.logo_box{}

.branding{display: flex;width: 100%;margin: 2em auto 0;color: #FFF;width: 95%;}
.branding .site-title .logo{width: 358px;height: 82px;}
.branding .site-title h1{font-size: clamp(10.5px, 0.95vw, 14px);line-height: 1.66;margin: 0 0 0 2.5em;}

header{width: 100%;margin: auto;position: absolute;z-index: 5;}
.header__nav{width: 88%;}
.header__nav_box{display: flex;/* justify-content: space-evenly; */align-items: flex-start;/* flex-direction: column; */margin: 0 0 1em;}
.header__nav_box .logo{max-width: 315px;margin-right: 2.5%;}
.header__nav_box nav{/* display: flex; */}
.header__nav_box nav ul{ display: flex; flex-direction: row; justify-content: flex-start; }
.header__nav_box nav ul li{line-height: 2.5;padding: 0 0 0 5%;font-weight: 500;position: relative;min-width: 225px;}
.header__nav_box nav ul li:before,.footer_box nav ul li:before{
  width: 8px;
  display: block;
  content: "";
  position: absolute;
  height: 8px;
  border: 1px solid;
  border-color: #ffffff #ffffff transparent transparent;
  transform: rotate(45deg);
  left: 6px;
  top: 18px;
  }

  .banner_nav{display: none;}

nav ul.nav-menu{display: flex;align-items: center;justify-content: flex-end;}
nav ul.nav-menu li{list-style-type: none;font-size: clamp(15px, 1.25vw, 16px);font-weight: 500;line-height: 1.75;margin: 0 0.5em;letter-spacing: -0.001em;}
nav ul.nav-menu li a:hover{opacity: 0.75;}

.header__hamburger { width: 48px; height: 100%; display: none; }
.hamburger { background-color: transparent; border: 0; z-index: 9999; cursor: pointer; }

.article, #wrapper{width: 100%;}

section{position: relative;margin: 5em auto;}

.kv {width: 100%;position: relative;}
.kvpc{ background-size: cover; background-position: center;background-image: url( './images/top_bg.webp');  width: 100%; height: calc(100% + 7vw); background-repeat: no-repeat; position: absolute; top: 0; left: 0; display: block; }
.kvtab{display: none;}
.kvsp{display: none;}

.kv_area{height: 97.5vh;position: relative;min-height: 780px;overflow-x: hidden;}
.kv_area_inner{width: 95%;max-width: 1380px;margin: auto;position: relative;height: 100%;display: flex;align-items: center;}

.kv_textarea .kv_box h2{ width: 600px; margin: 0 0 3.5em; }
.kv_logo{display: flex;position: absolute;align-items: center;left: 6%;bottom: 5vh;width: 100%;}
.kv_logo div{width: 320px;margin-right: 3%;}
.kv_logo img{width: 100%;}
.kv_logo h3{font-size: clamp(18px,1vw,21px);font-weight: 500;}

.kv_box{position: relative;left: 5%;width: 50%;}
.kv_box h2{max-width: 640px;margin: 0 0 4.5em 0%;width: 88.5%;}
.kv_box h3{font-size: clamp(17px, 2vw, 17.5px);font-weight: 600;margin: 0 0 0 1.25em;max-width: 207px;}

.kv_ichijyo{position: absolute;z-index: 5;bottom: 0;left: 55%;width: max-content;}
.kv_ichijyo img{max-width: 636px;}

.back_kv{position: absolute;top: 0;left: 30%;z-index: 0;height: 100%;width: 1200px;}
.back_kv div{height: 100%;width: 100%;max-width: 880px;position: absolute;clip-path: polygon(88% 0, 100% 0, 100% 100%, 0% 100%);}
.back_kv div:nth-child(1){background:var(--purple-1);z-index: 5;right: 0;}
.back_kv div:nth-child(2){background:var(--purple-2);right: 10%;}     

#wrapper{}

.info {width: 100%;margin: auto;padding: 2em 0;position: relative;background: #f2eff2;}
.info_box{display: flex;justify-content: space-evenly;align-items: center;align-items: stretch;height: 100%;max-width: 1280px;width: 95%;margin: auto;}

.info_text {padding: 3% 3% 3% 0.5%;width: 52.5%;height: auto;position: relative;display: flex;flex-direction: column;}
.info_text h3{font-size: clamp(16px,1vw,18px);line-height: 1.5;font-weight: 500;position: relative;margin: 0 0 1em;padding: 0.5% 2%;background: var(--purple-1);color: #FFF;width: 115px;text-align: center;}
.info_list{position: relative;margin: 0 0 1em;padding: 0 0 1em;border-bottom: 1px solid #e3cfe2;}
.info_list_day{ color: var(--purple-1); margin-bottom: 0.5em; }
.info_list_cont{}
.info_list_link{ position: absolute; right: 0; bottom: 1em; font-size: 90%; color: var(--purple-1); }

.info_insta {display: flex;justify-content: center;max-width: 850px;/* align-items: center; aspect-ratio: 16 / 9;*/}
.info_insta img{/* max-width: 200px; */}


.movie{text-align: center;margin: 0em auto;padding: 6.5em;background: linear-gradient(118deg, #753171 50%, #4d0c49 50%);}

.videoWrap{
	aspect-ratio: 16 / 9;
	width: 100%;
	position: relative;
	max-width: 1280px;
	margin: auto;
}

.videoWrap video{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}



.project{margin: auto;padding: 3em 0;background-size: cover;background-position: center top;background-image: url(./images/project_bg.webp);background-repeat: no-repeat;background-size: contain;background-color: #f4eff5;}
.project_head{max-width: 415px;margin: 3em auto;}
.project h2{text-align: center;font-size: clamp(22px, 1.75vw, 27px);font-weight: 700;margin: 1em auto;}
.project h3{text-align: center;font-size: clamp(16px, 2.65vw, 24px);margin: 1em;}

.project_tag{color:#FFF;display: flex;align-items: center;background: linear-gradient(118deg,var(--purple-4) 50%, var(--purple-3) 50%);max-width: 606px;margin: 5em auto 0;padding: 0.5% 3% 0.5%;border-radius: 8px;}
.project_tag div:nth-child(1){width: 25%;}
.project_tag div:nth-child(1) img{margin-top: -1em;}
.project_tag div:nth-child(2){width: 75%;}
.project_tag div:nth-child(2) h2{font-size: clamp(21px, 3.35vw, 38px);font-weight: 800;margin: 0.25em auto;}
.project_tag div:nth-child(2) h3{margin: 0.25em auto;}

.project_area {display: grid;grid-template-columns: 1fr 1fr;gap: 2%;width: 95%;max-width: 1280px;margin: 3em auto;padding: 0 0 0%;line-height: 1.75;}

.project_box {position: relative;width: 100%;background: linear-gradient(0deg, #f1e8f1 50%, #ffffff 50%);border-radius: 8px;box-shadow: 0px 0px 3px #c1c1c1;display: flex;flex-direction: column;}
.project_box_cate{display: flex;margin: 1.5% 4.5% 0;justify-content: space-between;align-items: center;}
.project_box_cate>div:nth-child(1){width: 18.75%;font-size: 90%;text-align: center;padding: 0;}
.project_box_cate>div:nth-child(2){width: 78%;line-height: 1.66;}

.project_box_cate.box0{padding: 2.5% 0 0;margin-bottom: 0;}
.project_box_cate.box1{position: relative;border-bottom: 1px solid #e3cfe2;margin-top: 0;}
.project_box_cate.box2{ padding: 2.5% 0; }
.project_box_cate.box3{background: var(--white-1);margin: 0;padding: 3.5% 4.5%;margin-bottom: auto;}
.project_box_cate.box4{background: linear-gradient(118deg, var(--purple-4) 50%, var(--purple-3) 50%);margin: 0;padding: 1.0em 5.5%;border-radius: 0 0 8px 8px;position: relative;bottom: 0;}
.project_box_cate.box5{}

.project_box_cate.box0>div:nth-child(1){font-size: clamp(15px, 1.0vw, 13px);color: #7a2a76;font-weight: 600;}
.project_box_cate.box0>div:nth-child(1){}

.project_box_num{width: 102px;position: relative;text-align: center;height: auto;font-size: 75%!important;font-weight: 700;color: var(--purple-4);}
.project_box_num img{width: 80%;margin: 0em auto 0em;}
.project_box_num_sp{display: none;}

.project_box_title{ text-align: left; }
.project_box_title h2{text-align: left;margin: 0.5em auto 1.0em;line-height: 1.33;color: var(--purple-3);}
.project_box_title h2 span{font-size: 60%;}
.project_box_title h3{ text-align: left; font-size: clamp(18px, 2.35vw, 18px); margin: 1em 0 0; }

.project_illust{ position: absolute; right: 0; bottom: 0; }
.project_illust img{max-width: 80px;position: relative;}

.project_box_cate .probrem{ padding: 1.5% 0 6%!important; }
.project_box_cate .probrem_cont{}

.project_box_cate .subject{}
.project_box_cate .subject img{
    margin: 0 0 0.25em;
}
.project_box_cate .subject p{ line-height: 1.25; }
.project_box_cate .subject_cont{
    padding: 0 0 0 1.5em;
}
.project_box_cate .subject_cont ul{}
.project_box_cate .subject_cont ul li{line-height: 1.5;font-size: clamp(16px, 2.35vw, 17px);list-style-type: disc;margin: 0.33em 0;}

.project_box_cate .feature{background: #FFF;border-radius: 88px;height: 80px;width: 80px!important;display: flex;align-items: center;justify-content: center;}
.project_box_cate .feature_cont{ color: #FFF; }

.project_box:nth-child(3) .project_box_cate.box1,
.project_box:nth-child(4) .project_box_cate.box1,
.project_box:nth-child(5) .project_box_cate.box1{border-bottom: 0;margin-bottom: 0;padding-bottom: 1em;}
.project_box:nth-child(3) .project_box_title h2{letter-spacing: 0;text-indent: -0.5em;}
.project_box:nth-child(3) .project_box_cate.box3{padding: 6.6% 4.5%;}

.project_box:nth-child(2) .project_illust img{max-width: 105px;right: -21px;}
.project_box:nth-child(3) .project_illust img{max-width: 105px;right: -21px;}
.project_box:nth-child(4) .project_illust img{ max-width: 105px;}
.project_box:nth-child(5) .project_illust img{ max-width: 145px;}
.project_box:nth-child(5) { height: 90%; box-shadow: 0px 1px 3px #c1c1c1; }

.project_box.last{background: none;box-shadow: none;padding: 8.5%;font-size: clamp(18px, 2.5vw, 19.5px);}
.project_box.last p {margin: 0 0 1em;font-weight: 500;}
.project_box.last p:first-child{font-weight: 600;font-size: 155%;line-height: 1.5;    color: var(--purple-1);}

.profile_head {margin: 0 auto;padding: 8.5% 0;
    background-image: url(./images/prof.webp);background-repeat: no-repeat;background-size: cover;
    background-color: #ffffff;background-position: center top;}
.profile_head_kv{display: none;}
.profile_head_box {display: flex;align-items: center;width: 95%;margin: auto;max-width: 1280px;}

.profile_head_text{padding: 4.5%;max-width: 660px;background: #FFF;border-radius: 8px;}
.profile_head_text_head{display: flex;justify-content: flex-start;align-items: center;border-bottom: 1px solid var(--purple-2);padding: 0 0 0.5em;margin: 0 0 0.5em;}
.profile_head_text_head h2{line-height: 1;font-weight: 700;font-size: clamp(25px, 3.5vw, 32px);display: flex;color: var(--purple-3);align-items: flex-end;/* border-bottom: 1px solid var(--purple-2); */padding: 0 0 0.15em;margin: 0 0 0.15em;}
.profile_head_text_head h2 span{display: block;font-weight: 500;font-size: clamp(13px, 2.15vw, 17px);margin: 0 0.5em 0;}
.profile_head_text_head_illust{width: 35%;max-width: 150px;margin-right: 5%;}
.profile_head_text p{margin: 1.5em 0 0;line-height: 1.66;font-weight: 400;font-size: clamp(17px, 2.75vw, 18px);}

.profile_head_text_cont_1 p:nth-child(1),.profile_head_text_cont_2 p:nth-child(1){ color: var(--purple-3); }
.profile_head_text_cont_1{display: flex;}
.profile_head_text_cont_2{display: block;}

.profile_head_text_cont_1 p:nth-child(1){font-weight: 600;}
.profile_head_text_cont_1 p:nth-child(2){}

.profile_head_text_cont_2 p:nth-child(1){font-weight: 600;}
.profile_head_text_cont_2 p:nth-child(2){padding-left: 1.2em;margin: 0.15em 0 0;}


.profile {background: #FFF;padding: 3em 0 3em;margin: 0;}
.profile_area {max-width: 1280px;margin: 1em auto;color: var(--black-2);width: 90%;}
.profile_cate{text-align: center;font-size:clamp(24px, 2.75vw, 29px);color: var(--purple-1);font-weight: 600;background-image: url(./images/fujicity.svg);background-repeat: no-repeat;background-position: right;width: fit-content;margin: auto;padding: 4.5%;}
.profile_box {display: flex;margin: 2em 0 4.5em;width: 100%;justify-content: space-between;}
.profile_area:nth-child(even) .profile_box{ flex-direction: row-reverse; }

.profile_box_image{max-width: 600px;width: 45%;position: relative;z-index: 1;}
.profile_box_image img{position: relative;z-index: 5;border-radius: 8px;}

.profile_box_text{width: 52.5%;padding: 0 1%;}
.profile_box_text_cont p{line-height: 1.75;margin: 0 0 1.5em;font-weight: 400;}
.profile_box_text_cont p:nth-child(1){ color: var(--purple-3); font-weight: 600; margin: 0 0 0.5em; }
.profile_box_text_cont p:nth-child(2){ padding-left: 1.2em; }


.footline {margin: 0 auto;}
.footline_area{max-width: 1080px;margin: auto;}
.footline_box {display: flex;align-items: center;flex-direction: column;width: 52%;}

.footline_head{background: var(--line);width: 100%;border-radius: 8px 8px 0 0;padding: 3%;}
.footline_head h2{line-height: 1.25;font-weight: 700;font-size: clamp(23px, 3.5vw, 38px);color: #ffffff;text-align: center;}
.footline p{line-height: 1.66;font-weight: 400;font-size: clamp(17px, 2.75vw, 18px);}

.footline_cont{display: flex;flex-direction: column;background: #FFF;width: 100%;text-align: center;position: relative;padding: 3% 0;}
.footline_cont img{max-width: 216px;margin: auto;}

 .footline_cont:after{ border-left: 41px solid #fff; border-top: 18px solid transparent; border-bottom: 18px solid transparent; content: ''; margin-top: -10px; position: absolute; right: -39px; top: 50%; }

.footline_foot{display: flex;background: #e3ff24;width: 100%;border-radius: 0 0 8px 8px;justify-content: center;align-items: center;padding: 3%;}
.footline_foot div:nth-child(1){ text-align: right; color: #094020; margin-right: 3%; }
.footline_foot div:nth-child(2){}
.footline_foot h3{ font-size: clamp(25px, 3.5vw, 38px); font-weight: 800; }
.footline_foot h4{ font-weight: 600; margin: 0 0.25em; }


footer{position: relative;margin: 0 auto;padding: 10.0% 0 1.5%;background-image: url(./images/footline.webp);background-repeat: no-repeat;background-size: cover;background-position: right top;}
#copyright{text-align: center;color: #FFF;}

.footer_area{color: #FFF;padding: 5em 0 0em;font-size: 80%;}
.footer_box{margin: 0 auto 0em;padding: 1.5% 0;max-width: 1280px;width: 90%;}

.footer_logo{display: flex;width: 80%;flex-direction: column;margin: 0 0 2em;}    
.footer_logo img{padding: 0 0 0.2em;max-width: 332px;}

.footer_underbox nav{width: 50%;}
.footer_underbox nav ul{display: flex;flex-direction: row;width: 100%;}
.footer_underbox nav ul li{font-size: 17px;position: relative;padding-left: 3%;margin-right: 3%;}
.footer_box nav ul li:before{ left: 0px; top: 10px; }


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

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

.project .section_title .brsp{display: none;}

.logo_box{margin: 0 auto 1em;}
.banner_nav{display: block; margin-top: 1em;}

.branding .site-title .logo{width: 358px;height: 82px;}
.branding .site-title h1{font-size: clamp(10.5px, 0.95vw, 14px);line-height: 1.66;margin: 0 0 0 2.5em;}

.header__nav{width: 88%;}
.header__nav_box .logo{ max-width: 315px; }
.header__nav_box nav ul{ flex-direction: column; }
.header__nav_box nav ul li{ line-height: 1.5; padding: 0 0 0 11%; width: 95%; margin: 0 0 1em; }
.header__nav_box nav ul li:before,.footer_box nav ul li:before{ left: 0px; top: 10px; }

nav ul.nav-menu{display: flex;align-items: center;justify-content: flex-end;}
nav ul.nav-menu li{list-style-type: none;font-size: clamp(15px, 1.25vw, 16px);font-weight: 500;line-height: 1.75;margin: 0 0.5em;letter-spacing: -0.001em;}
nav ul.nav-menu li a:hover{opacity: 0.75;}

.header__hamburger { width: 48px; height: 100%; display: none; }
.hamburger { background-color: transparent; border: 0; z-index: 9999; cursor: pointer; }


nav ul.nav-menu{flex-direction: column;}
nav ul.nav-menu li{border-top: 1px dotted #bae2f3;width: 90%;}
#wrapper{position: relative;}
    
    .header {}
    .header__inner {width: 95%;}
    .header__nav {position: fixed;left: 100%;top: 0;width: 100%;height: 100vh;transition: ease .33s;display: flex;flex-direction: column;justify-content: center;z-index: 48;align-items: center;background-color: #9446a2f0;}

    .menu-item a {color: var(--black-1);display: block;text-align: center;padding: 1em 0;}
    .menu-item:last-child a { margin-bottom: 0; }
    
    .hamburger {top: 0;position: fixed;display: block;right: 3%;height: 52px;}

    .hamburger span {width: 100%;height: 2px;background-color: var(--black-1);position: relative;transition: ease .4s;display: block;border-radius: 8px;}
    .hamburger span:nth-child(1) {}
    .hamburger span:nth-child(2) { margin: 8px 0; }
    .hamburger span:nth-child(3) { top: 0; }
    
    .header__nav.active {left: 50%;flex-direction: column;justify-content: center;z-index: 99850;align-items: center;width: 50%;}
    .hamburger.active span:nth-child(1) {top: 10px;transform: rotate(45deg);height: 1px;background: #FFF;}
    .hamburger.active span:nth-child(2) {opacity: 0;height: 1px;}
    .hamburger.active span:nth-child(3) {top: -8px;transform: rotate(-45deg);height: 1px;background: #FFF;}

    .header__nav_box{width: 95%;max-width: 330px;padding: 2.0%;flex-direction: column;}
  
    .header__nav_box .logo{margin: 2.5em auto 2.5em;}
    .header__nav_box .main-navigation{ padding-bottom: 1em; }

    .kv_box  h2 .brsp{display: none;}
    .info_text_illust{ right: 1%; width: 23%;}
    .brpc_intro_text{display: block;}


.article, #wrapper{width: 100%;}

.kvpc{display:none; }
.kvtab{display: block;}
.kvsp{ display:none; }
.kv_area_inner{display: none;}
.kv_area{height: auto;position: relative;min-height: unset;overflow-x: hidden;}



.kv_textarea .kv_box h2{ width: 600px; margin: 0 0 3.5em; }
.kv_logo{display: flex;position: absolute;align-items: center;left: 6%;bottom: 5vh;width: 100%;}
.kv_logo div{width: 320px;margin-right: 3%;}
.kv_logo img{width: 100%;}
.kv_logo h3{font-size: clamp(18px,1vw,21px);font-weight: 500;}

.kv_box{position: relative;left: 5%;width: 50%;}
.kv_box h2{max-width: 695px;margin: 0 0 4.5em 0%;width: 95%;}
.kv_box h3{font-size: clamp(17px, 2vw, 17.5px);font-weight: 600;margin: 0 0 0 1.25em;max-width: 207px;}

.kv_ichijyo{position: absolute;z-index: 5;bottom: 0;left: 55%;width: max-content;}
.kv_ichijyo img{max-width: 636px;}

.back_kv{position: absolute;top: 0;left: 30%;z-index: 0;height: 100%;width: 1200px;}
.back_kv div{height: 100%;width: 100%;max-width: 880px;position: absolute;clip-path: polygon(88% 0, 100% 0, 100% 100%, 0% 100%);}
.back_kv div:nth-child(1){background:var(--purple-1);z-index: 5;right: 0;}
.back_kv div:nth-child(2){background:var(--purple-2);right: 10%;}     



.info {width: 100%;margin: auto;padding: 1em 0 2em;position: relative;background: #f2eff2;}
.info_box{flex-direction: column;width: 90%;}
.info_text { width: 100%; }
.info_list_link{ position: absolute; right: 0; bottom: 1em; font-size: 90%; color: var(--purple-1); }

.info_insta {width: 100%;max-width: unset;aspect-ratio: unset;}

.movie{ position: relative; padding: 0; }
.movie .movie_box{width: 90%;}

.project{ background-size: 200%; padding: 3em 0 1.0em; }
.project h2{ width: 90%; }
.project h3{text-align: center;}

.project_area {grid-template-columns: 1fr;display: block;}

.project_box { margin: 0 0 1.5em; }
.project_box_cate{ margin: 0.5% 3.5%; }
.project_box_cate>div:nth-child(1){ width: 14.5%; }
.project_box_cate>div:nth-child(2){width: 80%;}

.project_box_cate.box2{padding: 1.5% 0;}
.project_box_cate.box3{padding: 2.5% 4.5%;}
.project_box_cate.box4{margin: 0;padding: 1.0em 5.5%;border-radius: 0 0 8px 8px;position: relative;bottom: 0;}

.project_box_num img{width: 60%;margin: 0em auto 1em;}

.project_box_title h2{max-width: 75%;margin-left: 0;}
.project_box_title h3{ text-align: left; font-size: clamp(18px, 2.35vw, 18px); margin: 1em 0 0; }

.project_box_cate .probrem{padding: 1.5% 0 1.5%!important;}

.project_box:nth-child(2) .project_illust img{max-width: 105px;right: -21px;}
.project_box:nth-child(3) .project_illust img{max-width: 105px;right: -21px;}
.project_box:nth-child(4) .project_illust img{ max-width: 105px;}

.project_box.last{padding: 6.5% 6.5% 0;text-align: left;}

.profile_head {padding: 0;background: no-repeat;}
.profile_head_kv{display: block;}

.profile_head_text{max-width: unset;}
.profile_head_text_head_illust{width: 35%;max-width: 150px;margin-right: 5%;}
.profile_head_text p{margin: 1.5em 0 0;line-height: 1.66;font-weight: 400;font-size: clamp(17px, 2.75vw, 18px);}
.profile_head_text_cont_2 p:nth-child(1){font-weight: 600;}
.profile_head_text_cont_2 p:nth-child(2){padding-left: 1.2em;margin: 0.15em 0 0;}


.profile { padding: 1em 0; }
.profile_area {}
.profile_cate{background-position: right;padding: 7.5%;}
.profile_box {margin: 1em 0 2.5em;}
.profile_area:nth-child(even) .profile_box{ flex-direction: row-reverse; }

.profile_box_image{position: relative;z-index: 0;}
.profile_box_image img{}

.profile_box_text{}
.profile_box_text_cont p{}
.profile_box_text_cont p:nth-child(1){}
.profile_box_text_cont p:nth-child(2){ padding-left: 1.2em; }


.footline {padding: 5.5% 0;background-position: 80% top;}
.footline_area{max-width: 730px;margin: auto;}
.footline_box {width: 55%;}

.footline_head{}
.footline_head h2{}
.footline p{}

.footline_cont{}
.footline_cont img{max-width: 216px;margin: auto;}

 .footline_cont:after{
  border-left: 41px solid #fff;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  content: '';
  margin-top: -10px;
  position: absolute;
  right: -39px;
  top: 50%;
 }

.footline_foot{}
.footline_foot div:nth-child(1){}
.footline_foot div:nth-child(2){}
.footline_foot h3{}
.footline_foot h4{}

.footer_area{
    color: #FFF;
    padding: 0em 0 1em;
    background-position: center bottom;
    font-size: 80%;
    background-size: 25%;
    }
.footer_box{margin: 0 auto 0em;padding: 1.5% 0;max-width: 1280px;width: 90%;text-align: center;}

.footer_logo{display: flex;width: 80%;flex-direction: column;margin: 0 auto 2em;text-align: center;}    
.footer_logo img{}


.footer_underbox{justify-content: center;}
.footer_underbox nav{width: 50%;display: none;}
.footer_underbox nav ul{flex-direction: column;}
.footer_underbox nav ul li{font-size: 17px;position: relative;padding-left: 8%;margin-right: 3%;}
.footer_box nav ul li:before{ left: 0px; top: 10px; }

footer{background-position: 75% top;}
#copyright{text-align: center;color: #FFF;}
}


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

    .brpc{ display: none;}
    .brsp{display: block;}

.profile_head {margin: 0 auto;padding: 8.5% 0;
    background-image:none;}

        .profile_box,.profile_area:nth-child(even) .profile_box { flex-direction: column; }

      .profile_box_image { max-width: unset; width: 100%; }
      .profile_head {padding: 0;background-size: contain;height: unset;}
.profile_head_box {}

.profile_head_text{}
.profile_head_text_head{}
.profile_head_text_head h2{}
.profile_head_text_head h2 span{}
.profile_head_text_head_illust{width: 35%;max-width: 150px;margin-right: 5%;}
.profile_head_text p{}

.profile_head_text_cont_1 p:nth-child(1),.profile_head_text_cont_2 p:nth-child(1){}
.profile_head_text_cont_1{}
.profile_head_text_cont_2{}

.profile_head_text_cont_1 p:nth-child(1){}
.profile_head_text_cont_1 p:nth-child(2){}

.profile_head_text_cont_2 p:nth-child(1){font-weight: 600;}
.profile_head_text_cont_2 p:nth-child(2){padding-left: 1.2em;margin: 0.15em 0 0;}
.profile_head_text {border-radius: 8px;position: relative;top: unset;}
.profile_box_text { width: 100%; padding: 0; margin-top: 1em; }   
}

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


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

    .brpc{display: none;}
    .brsp{display: block!important;}

    .project .section_title .brsp{display: none;}

 .banner{width: 100%;}

.logo_box{display: flex;justify-content: space-evenly;align-items: flex-start;flex-direction: column;margin: 0 0 1em;}

.branding{display: flex;width: 100%;margin: 1em auto 0;color: #FFF;width: 95%;}
.branding .site-title .logo{width: 245px;margin: 0 0 0 0.5em;}
.branding .site-title h1{font-size: clamp(10.5px, 0.95vw, 14px);line-height: 1.66;margin: 0 0 0 2.5em;}

header{}
.header__nav{width: 88%;}
.header__nav_box .logo{ max-width: 315px; }
.header__nav_box nav{ width: 95%; margin: auto; }
.header__nav_box nav ul{flex-direction: column;}
.header__nav_box nav ul li{line-height: 1.5;padding: 0 0 0 11%;width: 95%;margin: 0 0 1em;}
.header__nav_box nav ul li:before,.footer_box nav ul li:before{ left: 0px; top: 10px; }

nav ul.nav-menu{display: flex;align-items: center;justify-content: flex-end;}
nav ul.nav-menu li{list-style-type: none;font-size: clamp(15px, 1.25vw, 16px);font-weight: 500;line-height: 1.75;margin: 0 0.5em;letter-spacing: -0.001em;}
nav ul.nav-menu li a:hover{opacity: 0.75;}

.header__hamburger { width: 48px; height: 100%; display: none; }
.hamburger { background-color: transparent; border: 0; z-index: 9999; cursor: pointer; }


nav ul.nav-menu{flex-direction: column;}
    nav ul.nav-menu li{border-top: 1px dotted #bae2f3;width: 90%;}
    #wrapper{position: relative;}
    
    .header {}
    .header__inner {}
    .header__nav {}

    .menu-item a {color: var(--black-1);display: block;text-align: center;padding: 1em 0;}
    .menu-item:last-child a { margin-bottom: 0; }
    
    .hamburger {top: 0;position: fixed;display: block;right: 3%;height: 52px;}

    .hamburger span {width: 100%;height: 2px;background-color: var(--black-1);position: relative;transition: ease .4s;display: block;border-radius: 8px;}
    .hamburger span:nth-child(1) {}
    .hamburger span:nth-child(2) { margin: 8px 0; }
    .hamburger span:nth-child(3) {}
    
    .header__nav.active {left: 25%;width: 75%;}
    .hamburger.active span:nth-child(1) {top: 10px;transform: rotate(45deg);height: 1px;}
    .hamburger.active span:nth-child(2) {opacity: 0;height: 1px;}
    .hamburger.active span:nth-child(3) {}

    .header__nav_box{background: transparent;display: flex;flex-direction: column;}
  
    .header__nav_box .logo{width: 95%;margin: 2.5em auto 2.5em;}
    .header__nav_box .main-navigation{ padding-bottom: 1em; }


    .kv_box  h2 .brsp{display: none;}
    .info_text_illust{ right: 1%; width: 23%;}
    .brpc_intro_text{display: block;}


.article, #wrapper{width: 100%;}

.kvpc{display:none; }
.kvtab{display:none; }
.kvsp{ background-size: contain; width: 100%; background-position: top; display: block;}

.kv_area{height: auto;position: relative; min-height:auto; overflow-x: hidden;}

.kv_textarea .kv_box h2{ width: 600px; margin: 0 0 3.5em; }
.kv_logo{display: flex;position: absolute;align-items: center;left: 6%;bottom: 5vh;width: 100%;}
.kv_logo div{width: 320px;margin-right: 3%;}
.kv_logo img{width: 100%;}
.kv_logo h3{font-size: clamp(18px,1vw,21px);font-weight: 500;}

.kv_box{position: relative;left: 5%;width: 50%;}
.kv_box h2{max-width: 695px;margin: 0 0 4.5em 0%;width: 95%;}
.kv_box h3{font-size: clamp(17px, 2vw, 17.5px);font-weight: 600;margin: 0 0 0 1.25em;max-width: 207px;}

.kv_ichijyo{position: absolute;z-index: 5;bottom: 0;left: 55%;width: max-content;}
.kv_ichijyo img{max-width: 636px;}

.back_kv{position: absolute;top: 0;left: 30%;z-index: 0;height: 100%;width: 1200px;}
.back_kv div{height: 100%;width: 100%;max-width: 880px;position: absolute;clip-path: polygon(88% 0, 100% 0, 100% 100%, 0% 100%);}
.back_kv div:nth-child(1){background:var(--purple-1);z-index: 5;right: 0;}
.back_kv div:nth-child(2){background:var(--purple-2);right: 10%;}     



.info {padding: 1em 0;}
.info_box{margin: auto;flex-direction: column;}

.info_text {padding: 3%;width: 100%;}
.info_text h3{ margin: 0 auto 1em; }

.info_list_day{ margin-bottom: 0.25em; }

.info_list_link{position: relative;bottom: -0.5em;text-align: right;}

.info_insta {width: 100%;}

.project{background-size: 348%;padding: 3em 0 1.0em;}
.project_head{max-width: unset;width: 68%;margin: 2em auto;}
.project h2{ width: 90%; margin: 1.5em auto; }
.project h3{ width: 95%; margin: auto; }
.project_tag{ flex-direction: column; width: 90%; }
.project_tag div:nth-child(1){ width: 33%; }
.project_tag div:nth-child(1) img{}
.project_tag div:nth-child(2){width: 95%;margin: 1em auto 0;line-height: 1.25;}
.project_tag div:nth-child(2) h2{font-size: 175%;margin-bottom: 0.75em;}
.project_tag div:nth-child(2) h3{}

.project_area {width: 92.5%;margin-bottom: 0;}

.project_box { margin: 0 0 1em; }
.project_box_cate{ margin: 0.5% 0.5%; flex-direction: column; }
.project_box_cate>div:nth-child(1){width: 32.5%;margin: 0.25em auto 0.5em;font-weight: 600;}
.project_box_cate>div:nth-child(2){width: 95%;/* min-height: 2.5em; */line-height: 1.66;}

.project_box_cate.box0{ text-align: center; }
.project_box_cate.box1{width: 95%;margin: auto;padding: 0 0 1.5%;}
.project_box_cate.box2{padding: 1.5% 2.5% 3.5%;border-bottom: 1px solid #e3cfe2;width: 95%;margin: auto;}
.project_box_cate.box3{background: #ffffff;}
.project_box_cate.box4{ padding: 0.5em 5.5% 1em; }
.project_box_cate.box5{}

.project_box_cate.box0>div:nth-child(1){}
.project_box_cate.box0>div:nth-child(1){}

.project_box_num{display: none;}
.project_box_num img{}
.project_box_num_sp{display: block;width: 50%;margin: 0.5em auto;}

.project_box_title{}
.project_box_title h2{text-align: center;margin: 0.5em auto 0.5em;line-height: 1.33;max-width: 100%;width: 100%;}
.project_box_title h2 span{}
.project_box_title h3{ text-align: left; font-size: clamp(18px, 2.35vw, 18px); margin: 1em 0 0; }

.project_illust{}
.project_illust img{display: none;}

.project_box_cate .probrem{}
.project_box_cate .probrem_cont{}

.project_box_cate .subject{}
.project_box_cate .subject img{}
.project_box_cate .subject p{ font-weight: 600; }
.project_box_cate .subject_cont{ margin: 0.5em 0 0.5em; }
.project_box_cate .subject_cont ul{}
.project_box_cate .subject_cont ul li{list-style-type: disc;line-height: 1.5;margin: 0 0 0.5em 0em;}

.project_box_cate .feature{border-radius: 2px;height: 31px;}
.project_box_cate .feature_cont{}

.project_box:nth-child(1) .project_box_title h2{font-size: 150%;line-height: 1.1;}

.project_box:nth-child(3) .project_box_cate.box1,
.project_box:nth-child(4) .project_box_cate.box1,
.project_box:nth-child(5) .project_box_cate.box1{padding-bottom: 0.25em;border-bottom: 1px solid #d1b0d0;}
.project_box:nth-child(3) .project_box_title h2{ max-width: 100%; text-indent: 0; }
.project_box:nth-child(3) .project_box_cate.box3{padding: 6.6% 3.5%;}

.project_box:nth-child(2) .project_illust img{max-width: 105px;right: -21px;}
.project_box:nth-child(3) .project_illust img{max-width: 105px;right: -21px;}
.project_box:nth-child(4) .project_illust img{ max-width: 105px;}
.project_box:nth-child(5) .project_illust img{}


.project_box.last{padding: 0 6.5%;margin-top: 2em;}
.project_box.last p { text-align: left; }


.profile_head { background-size: 125%; background-position: right top; height: auto; padding: 0; }
.profile_head_box {}

.profile_head_text{}
.profile_head_text_head{border-bottom: 1px solid #ebdceb;padding: 0 0 0.5em;margin: 1em 0 0.5em;}
.profile_head_text_head h2{}
.profile_head_text_head h2 span{}
.profile_head_text_head_illust{width: 35%;max-width: 150px;margin-right: 5%;}
.profile_head_text p{ margin: 0.25em 0 0; }

.profile_head_text_cont_1 p:nth-child(1),.profile_head_text_cont_2 p:nth-child(1){}
.profile_head_text_cont_1{ flex-direction: column; margin: 0 0 1em; }
.profile_head_text_cont_2{}

.profile_head_text_cont_1 p:nth-child(1){}
.profile_head_text_cont_1 p:nth-child(2){}

.profile_head_text_cont_2 p:nth-child(1){font-weight: 600;}
.profile_head_text_cont_2 p:nth-child(2){padding-left: 0.2em;margin: 0.15em 0 1em;}


.profile {padding: 1em 0 0em;}
.profile_area {}
.profile_cate{padding: 16.5% 0;}
.profile_box {}
.profile_area:nth-child(even) .profile_box{ flex-direction: row-reverse; }

.profile_box_image{position: relative;z-index: 0;}
.profile_box_image img{}

.profile_box_text{}
.profile_box_text_cont p{}
.profile_box_text_cont p:nth-child(1){}
.profile_box_text_cont p:nth-child(2){padding-left: 0;}

.profile_box,.profile_area:nth-child(even) .profile_box {flex-direction: column;margin: 0.5em 0 1.5em;}
.profile_box_image {}
.profile_head {}
.profile_head_box {}

.profile_head_text{}
.profile_head_text_head{}
.profile_head_text_head h2{}
.profile_head_text_head h2 span{}
.profile_head_text_head_illust{width: 35%;max-width: 150px;margin-right: 5%;}
.profile_head_text p{}

.profile_head_text_cont_1 p:nth-child(1),.profile_head_text_cont_2 p:nth-child(1){}
.profile_head_text_cont_1{}
.profile_head_text_cont_2{}

.profile_head_text_cont_1 p:nth-child(1){}
.profile_head_text_cont_1 p:nth-child(2){}

.profile_head_text_cont_2 p:nth-child(1){font-weight: 600;}
.profile_head_text_cont_2 p:nth-child(2){}
.profile_head_text {top: unset;}
.profile_box_text {}

.footline { background: var(--white-1); }
.footline_area{max-width: unset;margin: auto;width: 90%;}
.footline_box {width: 100%;}

.footline_head{}
.footline_head h2{ padding: 0.25em 0; }
.footline p{}

.footline_cont{}
.footline_cont img{max-width: 216px;margin: auto;}

 .footline_cont:after{ display: none; }

.footline_foot{}
.footline_foot div:nth-child(1){}
.footline_foot div:nth-child(2){}
.footline_foot h3{}
.footline_foot h4{}

.footer_area{ color: #FFF; padding: 0em 0 1em; background-position: center bottom; font-size: 80%; background-size: 25%; }
.footer_box{margin: 0 auto 0em;padding: 1.5% 0;max-width: 1280px;width: 90%;}

.footer_logo{width: 80%;margin: 1em auto 2em;}    
.footer_logo img{padding: 0 0 0.2em;max-width: 432px;}


.footer_underbox{ flex-direction: column; }
.footer_underbox nav{width: 60%;margin: auto;display: none;}
.footer_underbox nav ul{}
.footer_underbox nav ul li{font-size: 17px;position: relative;padding-left: 3%;margin-right: 3%;}
.footer_box nav ul li:before{ left: 0px; top: 10px; }

footer{position: relative;top: 0;height: auto;background: var(--white-1);}
#copyright{text-align: center;color: var(--purple-1);margin: 0 0 0.5em;}
}


.popup_wrap input { display: none; }  
 .popup_overlay { display: flex; justify-content: center; overflow: auto; position: fixed;
     top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); opacity: 0; transition: opacity 0.5s, transform 0s 0.5s; transform: scale(0); } 
 .popup_trigger {position: absolute;width: 100%;height: 100%;z-index: 9999;}
 .popup_content {position: relative;align-self: center;padding: 3%;background: #fff;line-height: 1.66;transition: 0.5s;font-size: 21px;color: var(--dark-green);font-weight: 500;height: 80vh;z-index: 9999;}
 .close_btn {position: absolute;top: 0px;right: 0px;font-size: 21px;cursor: pointer;background: var(--bg-purple);width: 40px;}
 .popup_wrap input:checked ~ .popup_overlay { opacity: 1; transform: scale(1); transition: opacity 0.5s; } 

 @media screen and (max-width: 780px) {	
    .popup_content {height: auto;width: 90%;}
 }

 @media screen and (max-width: 380px) {	
    .profile .section_title img {left: 1.5vw;}
 }

.demo-contents { display: flex; justify-content: space-around; }
.article-item {width: 100%;}
.article-item a { font-size: 24px; font-weight: bold; }
.article-item a:hover { cursor: pointer; color: #7ac8b7; }

/* modal-window ----------------------------------------- */
.modal-window {
  display: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgb(247 247 247 / 95%);
  z-index: 111;
  justify-content: center;
  align-items:  center;
  overflow: scroll;
}
.modal-area {
  width: 95%;
  max-width: 800px;
  background-color: #fff;
  padding: 30px 30px;
  height: fit-content;
  border-radius: 8px;
}

.modal-area-title{ font-weight: 600; font-size: 110%; margin-bottom: 1em; }
.modal-area-image{margin: 0 0 1em;}
.modal-area-image img{height: auto;width: 100%;height: 250px;object-fit: cover; }

.modal-area-content{ }
.modal-area-content p{ margin-bottom: 1em; }

.modal-open{cursor: pointer;}
.modal-open:hover{opacity: 0.75;}
/* modal-close ----------------------------------------- */
.modal-close { position: fixed; top: 30px; right: 30px; z-index: 113; cursor: pointer; 
    text-align: center; background: var(--purple-4); border-radius: 88px; }
.icon-close {width: 45px;height: 45px;position: relative;border-radius: 100%;cursor: pointer;}
.icon-close::before, .icon-close::after { display: block; content: ""; position: absolute; top: 50%; left: 20%; width: 60%; height: 2px; background: #ffffff; }
.icon-close::before { transform: rotate(-45deg); }
.icon-close::after { transform: rotate(45deg); }


 @media screen and (max-width: 480px) {	
    .modal-close {position: fixed;top: 0;right: 0;border-radius: 0;}
    .modal-window {align-items:flex-start;padding: 1vh 0 0;}
    .modal-area-image img{height: auto;width: 100%;height: 150px;object-fit: cover; }
 }

/* 25.06.02　追記 ----------------------------------------- */

.btn_profile {
  margin-top: 4.5%;
}

.btn_profile a {
  background: #eee;
  border-radius: 3px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 50%;
  padding: 12px 24px;
  color: #313131;
  font-size: clamp(18px, 2.75vw, 29px);
  transition: 0.3s ease-in-out;
  font-weight: 600;
}

.btn_profile a::before {
  content: '';
  position: absolute;
  bottom: -7px;
  right: -7px;
  width: 100%;
  height: 2px;
  background-color: #bbbbbb;
  transition: 0.2s ease 0s;
}

.btn_profile a::after {
  content: '';
  position: absolute;
  top: 7px;
  right: -7px;
  width: 2px;
  height: 100%;
  background-color: #bbbbbb;
  transition: 0.2s ease 0.2s;
}

.btn_profile a:hover::before {
  width: 0%;
}

.btn_profile a:hover::after {
  height: 0%;
}

.btn_profile a:hover {
  text-decoration: none;
  background-color: #ccc;
}

@media screen and (max-width: 1080px) {
  .btn_profile {
    padding-bottom: 4.5%;
  }
}

@media screen and (max-width: 780px) {
  .btn_profile a {
    width: 60%;
  }
}

@media screen and (max-width: 480px) {
  .btn_profile a {
    width: 74%;
    padding: 8px;
  }
}