@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300;400;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');
@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

@font-face {
	font-family: 'Noto Serif Japanese';
	font-style: normal;
	font-weight: 700;
	src: url(/fonts/NotoSerifCJKjp/NotoSerifCJKjp-Bold.otf) format('opentype');
	font-display: swap;
}


/**
 * reset
 */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, /*sup, */tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary, time, mark, audio, video, main {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-size: 18px;
     font-weight: normal;
     font-style: normal;
     vertical-align: baseline;
     background: transparent;
 }

sup {
	vertical-align: text-top;
	font-size: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: normal;
	font-style: normal;
	background: transparent;
}

html {
    scroll-behavior: smooth;
}

body{
    background: white;
    margin: 0;
    color: #414242;
	font-family: "Noto Sans SC","微软雅黑","Microsoft YaHei", 'SimSun', sans-serif;
    position:relative;
}

header{
    position:absolute;
    top:30px;
    left:20px;
    text-align:center;
    z-index:100;
}

header img{
    width:150px;
}

section{
    width:100%;
    padding:15vh 0;
    float:none;
    clear:both;
}

section#top{
    height:75vh;
    position:relative;
    padding:0;
    background: #122622;
}

.shape{
    overflow:hidden;
    position:relative;
    }
.shape::before{
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    bottom: -1px;
    left: -1px;
    right: -1px;
    top: -1px;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat; 
    background-size: 100% 55px;
    background-position: 50% 100%;    
    background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%23ffffff"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%23ffffff"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%23ffffff"/></svg>'); 
    }
    
    @media (min-width:768px){
    .shape::before{
    background-size: 100% 90px;
    background-position: 50% 100%;   
    }  
    }
     
    @media (min-width:1025px){
    .shape::before{ 
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw; 
    background-size: 116% 90px;
    background-position: 50% 100%;  
    }
    }
    @media (min-width:2100px){
    .shape::before{
    background-size: 116% calc(2vw + 90px);
    }
    }
     

img.top{
    width:100%;
    object-fit:cover;
}

section img.top{
    height:75vh;
    object-fit:cover;
    opacity: .8;
}


#seminar-video section#top,
#seminar-video section img.top{
    height:25vh;
}

div.cover{
    position:absolute;
    top:80%;
    width:100%;
    height:15vh;
 /*   background: linear-gradient(0deg, #ffffff 0, #ffffff00 30%); */
    background:#ffffff7a;
}

div.head{
    position:absolute;
    top:20%;
    right:0;
    left:0;
    text-align:center;
    color:white;
    z-index:20;
}

h1 p.t01{
    margin-bottom:40px;
}

h1 p.t01 span{
    font-size: 25px;
    padding: 10px 20px;
    font-weight: 700;
    background: #ffffff;
    color: #0094bd;
    text-shadow: 0 0 5px white;
    position: relative;
}

h1 p.t01 span::before,
h1 p.t01 span::after {
    position: absolute;
    top: 0;
    width: 0px;
    height: 0px;
    border-color: #fff transparent;
    border-style: solid;
    content: '';
}
h1 p.t01 span::before {
    left: -15px;
    border-width: 25px 0px 25px 15px;
}
h1 p.t01 span::after {
    right: -15px;
    border-width: 25px 15px 25px 0px;
}

h1 p.t02{
    font-size: 70px;
    line-height: 1.2;
    margin: 20px auto;
    text-shadow: 0 1px 15px #013f44;
    max-width: 90%;
    font-family: 'Noto Serif Simplified Chinese', 'KaiTi', "Noto Sans SC","微软雅黑","Microsoft YaHei", 'SimSun', "sans-serif";
    color: white;
}

h1 p.t02 > img{
    width: 300px;
    max-width: 100%;
    filter: drop-shadow(0 1px 7px #013f44);
}

h1 p.t03{
    font-size:40px;
    text-shadow: 0 1px 7px #141527;
    margin:30px auto 0 auto;
    max-width:90%;
}

.gradient1{
    /*ボタンの形状*/
    display: inline-block;
    color:#fff;
    padding: 18px 50px 18px 30px;
    border-radius:30px;
    text-decoration: none;
    outline: none;
    /*背景の色と形状*/
    background: linear-gradient(270deg, #4b38f7 0%, #0094bd 20%, #0094bd 75%, #4b38f7 100%);
    background-position: 1% 50%;
    background-size: 200% auto;
    background:#0094bd;
    /*アニメーションの指定*/
    transition: all 0.3s ease-out;
    margin: 20px auto;
    font-weight:600;
    letter-spacing: 0.05em;
    box-shadow: 0 5px 10px #078bb35e;
    position:relative;
}

.gradient1:after{
    position: absolute;
    top: 22px;
    right: 20px;
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    content: "\f138";
}

div.client .gradient1{
    background: #003e50;
    color: white;
}

/*hoverした際の、背景の場所とテキスト色の変更*/

div.client .gradient1:hover,
.gradient1:hover {
    color: white;
    background:#00c2e1;
}

section.inquiry div p.button a:hover{
    color: white;
    background:#00c2e1;
}

div.content{
    width:1200px;
    max-width:90%;
    margin: 0 auto;
}

h2{
    font-size:50px;
    margin-bottom:50px;
    text-align:center;
}

div.case{
    width:100%;
    display:flex;
    justify-content:space-between;
}

div.box{
    width:30%;
    height:auto;
    text-align:center;
}

div.box img{
    width:100%;
    margin-bottom: 20px;
}

div.box img.logo{
mix-blend-mode: multiply;
}

div.box p{
    margin:10px auto;
    text-align:left;
    opacity:.8;
}

div.box p.check{
    text-indent: -1em;
    padding-left: 1em;
}

i{
    margin-right:10px;
    color:#0094bd;
}

div.box i{
    font-size:150%;
}

section#problem{
    position:relative;
}
      
section#problem::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 40px 0 40px;
    border-color: #fff transparent transparent transparent;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    z-index:10;
}

section#merit{
    background:#bfe4ee;
    position:relative;
}
      
section#merit::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 40px 0 40px;
    border-color: #bfe4ee transparent transparent transparent;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
}

section#seminar{
    position:relative;
    overflow:hidden;
}

section.shape02{
    overflow:hidden;
    position:relative;
    }

section.shape02::before{
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    bottom: -1px;
    left: -1px;
    right: -1px;
    top: -1px;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat; 
    background-size: 100% 55px;
    background-position: 50% 100%;    
    background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%23ffffff"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%23ffffff"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%23ffffff"/></svg>'); 
    }
        
@media (min-width:768px){
    section.shape02::before{
    background-size: 100% 90px;
    background-position: 50% 100%;   
    }  
}
         
@media (min-width:1025px){
    section.shape02::before{ 
        bottom: -0.1vw;
        left: -0.1vw;
        right: -0.1vw;
        top: -0.1vw; 
        background-size: 116% 90px;
        background-position: 50% 100%;  
        background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" fill="%23e0f2f7"/></svg>'); 
    }
}

@media (min-width:2100px){
    section.shape02::before{
        background-size: 116% calc(2vw + 90px);
    }
}


section img.bubble{
    position:absolute;
    z-index:-10;
    width:100%;
    top:-10vh;
}

div.seminar-l,
div.seminar-r{
    width:100%;
    float:none;
    clear:both;
    margin-bottom:200px;
    position:relative;
}

div.seminar-l div.text{
    width:50%;
    float:left;
}

div.seminar-l > img{
    position:absolute;
    right:0;
    width:500px;
    height:500px;
    border-radius:250px;
    object-fit:cover;
    object-position: 30% 0;
    float:right;
}

div.seminar-r div.text{
    width:50%;
    float:right;
}

div.seminar-r > img{
    position:absolute;
    left:0;
    width:500px;
    height:500px;
    border-radius:250px;
    object-fit:cover;
    object-position: 10% 0;
    float:left;
}

h3{
    font-size:30px;
    margin-bottom:20px;
}

div.text p{
    padding:10px 0;
    opacity: 0.8;
}

div.text p.button{
    opacity:1;
    padding:0;
}

p.num,
div.text p.num{
    margin-bottom:10px;
}

p.num span,
div.text p.num span{
    color: #0094bd;
    padding: 2px 5px;
    border-bottom: 2px solid #0094bd;
    font-size: 30px;
    font-family: 'Courgette', 'Arial', sans-serif;
}

div.text p.title{
    font-weight: 500;
    padding: 3px 0;
    margin: 40px 0 5px 0;
    font-size: 21px;
    color: #0094bd;
}

ul {
    margin:0 0 20px 0;
}

ul li{
    list-style: disc;
    padding:8px 0 0 0;
	margin-left: 20px;
}

ul.content li{
    list-style:decimal;
    margin-left: 30px;
    opacity:.8;
}

ul.target li{
    list-style:none;
    padding-left: 0.8em;
    text-indent: -0.8em;
    opacity:.8;
}

div.fashiontech{
    float: none;
    clear: both;
    background: #003e50;
    padding: 30px 10%;
    margin-top: -50px;
    color:white;
    border-radius:15px;
}

#seminar-video div.fashiontech{
    margin:100px 0 50px 0;
}

div.next{
    background: #e0f2f7;
    color: #414242;
    padding: 30px 10% 20px 10%;
    position: relative;
    border: 1px solid #0094bd;
}

div.fashiontech div.text{
    width:60%;
    float:left;
}

div.next div.text{
    width:65%;
    float:right;
}

div.fashiontech p.intro{
    margin:20px 0 10px 0;
}

div.fashiontech p.intro span{
    font-size: 20px;
    font-weight: 600;
    background: #00dcff;
    padding: 2px 10px;
    color: #003e50;
}

div.next p.intro span {
    background: #0094bd;
    color: white;
}

div.fashiontech > img{
    width:30%;
    max-width:300px;
    float:right;
    margin:-50px auto 0 auto;
}

div.next p.intro{
    position: absolute;
    top: -35px;
    left: 3%;
}

div.next p.num span, div.text p.num span{
    font-size:25px;
}

div.next div.text p{
    font-size:20px;
}


div.next > img{
    width:30%;
    float:left;
    margin:0 auto;
    overflow:hidden;
}

section.inquiry{
    background: #0094bd;
    padding: 7.5vh 0 5vh 0;
}

section.inquiry div{
    text-align: center;
    color:white;
}

section.inquiry div p{
    margin-bottom:20px;
}

section.inquiry div p.button a{
    background:white;
    color:#0094bd;
}

div.box p.annotation{
    font-size:14px;
    text-align:center;
    color: #0094bdc7;
    margin: -10px auto 0 auto;
}

section#client{
    position:relative;
    background:#0094bd;
    color:white;
}

section#client > img{
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:.5;
    mix-blend-mode: multiply;
}

div.client{
    float:left;
    width:45%;
}

div.client img.logo{
    filter: drop-shadow(0 5px 15px #0094bd5e);
    margin-bottom: 10px;
}

div.client p.text{
    opacity:.8;
}

div.client p.annotation{
    opacity:.6;
    font-weight:700;
    padding-top: 10px;
}

div.client p.sub{
    font-size:30px;
    opacity:1;
    margin-bottom:20px;
}

#form div.content{
    width:830px;
}


/*=== 9-1-2 丸が動いてスクロールを促す ====*/

#scroll {
    position:fixed;
    bottom:0;
    width:100%;
    z-index:150;
}

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:10px;
  left:50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
  position: absolute;
  left:10px;
  bottom:10px;
    /*テキストの形状*/
  color: #0094bd;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
  width:10px;
  height:10px;
  border-radius: 50%;
  background:#0094bd;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
  100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:0;
  left:0;
    /*線の形状*/
  width:2px;
  height: 50px;
  background:#0094bd;
}



/*////////// ビデオ埋め込み //////////*/


div.video-box{
    width:1200px;
    max-width:100%;
    margin:30px auto 0 auto;
  }
  
  div.iframeWrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 30px auto 0 auto;
  }
  
  div.iframeWrap iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
  }



footer {
    width:100%;
    background:#0094bd;
	padding:10vh 0;
    color:white;
}

footer div{
	display:flex;
	text-align: center;
	justify-content:space-between;
	width: 1200px;
	max-width:90%;
	margin:0 auto 50px;
}

footer ul {
	width:20%;
}

footer ul li {
	list-style:none;
	padding:5px;
}

footer ul li a {
	color:white;
    text-decoration:none;
}

footer ul li a:hover {
	text-decoration: underline;
}

footer ul li.f-title {
	font-size:20px;
	font-weight:600;
}

footer small address {
	opacity:.6;
	font-size:12px;
    text-align:center;
}

footer p.pv {
    text-align:center;
}

footer p.pv a{
    color:white;
    text-decoration:none;
    line-height:3;
    font-size:14px;
}

footer p.pv a:hover{
    text-decoration:underline;
}



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

    div.next {
        padding: 30px 5% 20px 5%;
    }

}

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

    div.seminar-r > img,
    div.seminar-l > img{
        width:400px;
        height:400px;
        border-radius:200px;
    }
}


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

    div.fashiontech > img{
        margin:0 auto;
    }

}


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

    div.seminar-r > img,
    div.seminar-l > img{
        width:600px;
        height:600px;
        border-radius:300px;
        margin-right:-45%;
    }

    div.seminar-r > img{
        margin-right:0;
        margin-left:-45%;
    }
}


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

    section#top,
    section img.top{
        height:80vh
    }

}


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

    p, li {
        font-size:16px;
    }

    h1 p.t03{
        font-size:25px;
    }

    h2{
        font-size:30px;
    }

    div.case{
        display:block;
    }

    section#client{
        color:#414242
    }

    div.client .gradient1{
        background: #0094bd;
    }

    div.box,
    div.client{
        width:100%;
        margin-bottom:100px;
    }

    div.problem div.box{
        width:100%;
        float:none;
        padding-top:30px;
        margin-bottom:0;
        overflow:hidden;
    }

    div.problem div.box img{
        width: 200px;
        margin-bottom: 20px;
        padding-right: 50px;
        overflow:hidden;
        float: left;
    }

    div.problem div.box p.check{
        margin-top:30px;
    }

    section img.bubble{
        display:none;
    }

    div.seminar-l, div.seminar-r {
        margin-bottom:100px;
    }

    div.seminar-l div.text,
    div.seminar-r div.text,
    div.seminar-l img,
    div.seminar-r img{
        width:100%;
    }

    div.seminar-l > img{
        position:relative;
        width:100%;
        height: 400px;
        border-radius:0;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 80px;
        margin:0;
    }

    div.seminar-r > img{
        position:relative;
        width:100%;
        height: 400px;
        border-radius:0;
        border-bottom-left-radius: 80px;
        margin:0;
    }

    div.text p.button{
        text-align:center;
    }

    div.fashiontech h3,
    div.fashiontech p.intro,
    div.fashiontech div.text p.button{
        text-align:center;
    }
	div.fashiontech p.intro2{
		top: -6%;
    	left: 50%;
    	-webkit-transform: translate(-50%,-50%);
    	transform: translate(-50%,-50%);
    	width: 320px;		
	}
	
    div.fashiontech p.intro span{
        margin:20px auto;
		font-size: 16px;
    }
    div.fashiontech > img{
        display:none;
    }

    div.next div.text p{
        text-align:center;
		font-size: 16px;
    }

    #seminar-video div.fashiontech {
        margin: 100px 0 0 0;
    }

    div.client p.sub{
        font-size:25px;
    }

    footer div{
        display:block;
    }


    div.client h3,
    div.client p.button,
    footer ul li{
        text-align:center;
    }

    footer ul li{
        padding:0;
        margin-left:0;
    }

    div.fashiontech div.text,
    footer ul{
        width:100%;
    }

    footer ul.about01{
        margin-bottom:0;
    }

    footer ul.about02{
        margin-top:0;
    }

    footer ul li.f-title{
        padding-bottom:2px;
    }

    footer ul li.none{
        display:none;
    }
    

}



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

    footer ul li a {
    font-size:14px;
    line-height:1.8;
    }
    section.inquiry div p br{
        display:none;
    }
}


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

    section#top, section img.top {
        height: 90vh;
    }

    h1 p.t01 span {
        font-size: 20px;
    }

    h1 p.t01 span::before{
        border-width: 22px 0px 22px 15px;
    }

    h1 p.t01 span::after {
        border-width: 22px 15px 22px 0px;
    }

    h1 p.t02{
        font-size:60px;
    }

    div.text p.num{
        margin-bottom:0;
        padding-bottom: 5px;
    }

    div.text p.num span{
        font-size:20px;
        border-bottom:none;
    }

    div.problem div.box img{
        width: 150px;
    }
    
    div.seminar-r > img,
    div.seminar-l > img{
        height:250px;
    }
}