@charset "UTF-8";
/*
Theme Name: c-sample
Description: c-sample
Version: 0.12
Author: Takahiro Shimokawa
Author URI: https://wazenmiyabi.info/
*/
/*------------------------------------*/
/*▼イメージカラーを変数化*/
:root{
    /*青*/
    --hcolor:#03349c;
    --bluemaincolor:#0e4096;
    --blueback:#f1f7ff;
    --bluegrada1:#082082c7;
    --bluegrada2:#5592c6;
    --bluegrada:linear-gradient(90deg,var(--bluegrada1),var(--bluegrada2));
}
*{
    margin:0;
    padding:0;
}
html{
    font-size:62.5%;
    -webkit-font-smoothing:antialiased;
}
body{
    font-size:clamp(10px, 1.14vw, 24px);
    line-height:150%;
    -webkit-font-smoothing:antialiased;
    font-family:"Kiwi Maru",serif;
    font-weight:400;
}
@media screen and (max-width:1000px){
    body{
        overscroll-behavior:none;
    }
}
header,footer,article,section,nav,small,aside,div,ul,li,
h1,h2,h3,h4,h5,p{
    display:block;
    box-sizing:border-box;
    position:relative;
}
th,td{
    padding:.5em 1em;
    position:relative;
}
th{
    text-align:left;
    font-weight:400;
}
li{
    list-style:none;
}
img{
    display:block;
    outline:none;
    width:100%;
    height:auto;
}
iframe{
    border:none;
    width:100%;
    height:100%;
}
a{
    text-decoration:none;
}
h1,h2{
    color:var(--hcolor);
}
h2{
    margin-bottom:2em;
    font-weight:100;
    line-height:1.5em;
    font-size:3em;
}
h2 span{
    padding:0 1.5em;
    background:url(img/h2l.png)left center no-repeat,url(img/h2r.png)right center no-repeat;
    background-size:auto 100%;
    position: relative;
}
h2 span::after{
    position: absolute;
    bottom: -3em;
    font-size: .3em;
    left: 50%;
    transform: translate(-50%, 0);
    color: black;
    font-weight: 300;
    border-bottom:3px dotted var(--hcolor);
}
section:not(#news) h2 span::after{
    content: '' !important;
    width: calc(100% - 8em);
    bottom: -1em;
}
@media screen and (max-width:699px){
    h2{
        font-size:2.5em;
    }
}
h3{
    margin-bottom:1em;
    font-size:2em;
    font-weight:300;
    line-height:1.5em;
}
/*------------------------------------*/
#navi{
    padding:0 7%;
    position: fixed;
    left:0;
    top:0;
    width:100%;
    z-index: 9999;
    backdrop-filter: blur(10px);
    border-bottom:.4em solid;
    border-color:#042967;
    background:var(--bluemaincolor);
}
#navi a{
    color:white;
}
#navi li{
    margin:0 .5em;
    border-radius: 1em;
    overflow: hidden;
}
#navi li a{
    display:block;
    padding:.2em 1em;
}
#navi li:not(:nth-of-type(n+5)) a::before{
    content:"";
    height:1px;
    width:0;
    transition-duration:0.4s;
    position:absolute;
    bottom:0;
    left:0;
    background:white;
}
#navi li a:hover::before{
    width:100%;
}
#navi li:nth-last-of-type(2){
	background:#00a7dd;
}
#navi li:last-of-type{
    background: white;
}
#navi li:last-of-type a{
    color: #042967;
    font-weight: bold;
    transition-duration:0.4s;
}
#navi li:nth-last-of-type(2):hover,
#navi li:last-of-type:hover{
    background:#042967;
}
#navi li:last-of-type:hover a{
    color:white;
}
#navi h1 a{
    font-size: 1.5em;
    line-height: 1em;
    padding-bottom: .2em;
    display: block;
}
/*ロゴ画像*/
#navi h1 img{
    display:inline-block;
    height:2em;
    width:auto;
}
@media screen and (max-width:699px){
    #navi{
        padding:.5em .5em 0;
    }
	#mnavi{
		z-index: 9999;
	}
	#mnavi ul{
		position: fixed;
		bottom:0;
		left:0;
		width:100%;
		text-align: center;
	}
	#mnavi ul li{
		width:50%;
	}
	#mnavi li a{
		display: block;
		padding:.5em 0;
		color:#126fdc;
		font-size: 1.2em;
	}
	#mnavi li:nth-of-type(1){
		background:#97daf5;
	}
	#mnavi li:nth-of-type(2){
		background:#a1f106;
	}
}
/*---------------------*/
/*topbtn*/
#topbtn li{
    width:30em;
    margin:-3em 2em 1em;
}
#topbtn li a,
#line a{
    display: block;
    border:.2em solid white;
    border-radius: 1em;
    box-shadow:.1em .1em .3em #aaa;
    color:white;
    text-align: center;
    line-height: 2em;
    font-size:2em;
    transition-duration:0.4s;
    position: relative;
}
#topbtn li:nth-of-type(1) a{
    background:#ffbc42;
}
#topbtn li:nth-of-type(2) a,
#line a{
    background:#54ea59;
}
#topbtn li a:hover,
#line a:hover{
    transform:translate(0,3px);
    box-shadow: 0 0 .1em #aaa;
}
#topbtn li a::before,
#line a::before{
    content: '';
    width: 90%;
    height: .3em;
    background: rgba(255, 255, 255, .3);
    position: absolute;
    left: 5%;
    top: .2em;
    border-radius: 1em;
}
#line{
    width: 27em;
    margin: 5em auto 0;
}
@media screen and (max-width:699px){
    #topbtn li{
        width:24em;
        margin:0 auto 1em;
    }
}
/*------------------------------------*/
/*news*/
#news{
    padding:10em 0 7em;
    background:white;
}
#news h2{
    margin-bottom:0 !important;
    width:40%;
    text-align:center;
}
#news h2::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:-.1em;
    width:2em;
    transform:translate(-50%, 0);
    height:1px;
    background:#aaa;
}
#news h2 span::after{
    bottom: -5em;
    font-size: .3em;
    font-weight: 200;
}
#news ol{
    width:60%;
}
#news li{
    border-bottom:2px solid #ddd;
    padding:1em 0;
}
#news li p{
    margin-bottom:0;
}
#news .date{
    width:8em;
}
#news .date+p{
    width:calc(100% - 8em);
}
#news a{
    color:cornflowerblue;
}
@media screen and (max-width:699px){
    #news {
        padding:3em 1em 5em !important;
    }
    #news h2{
        width:100%;
        margin-bottom:1em !important;
    }
    #news ol{
        width:100%;
    }
}
/*------------------------------------*/
/*about*/
#about{
    padding:5em 0 0;
    background:linear-gradient(#fafafa 15em,white);
    text-align: center;
}
#about::before{
    content: "";
    width: 100%;
    height: 15em;
    background: white url(img/advantage.png) center bottom no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 0;
}
#about>div{
    padding:3em 5em 5em;
}
#about h3{
    margin-bottom:2em;
}
#about h3::before{
    content:'';
    width:100%;
    position: absolute;
    bottom:-.5em;
    left:00;
    border-bottom:1px dotted #aaa;
}
#about h3 span:nth-of-type(1){
    font-size: .8em;
    padding: 0 2em;
    box-shadow: .1em .1em .3em #aaa;
    border-radius: 37%;
    color: white;
    font-weight: bold;
    transform: translate(0, -.5em);
    display: inline-block;
    line-height: 2.5em;
}
#about h3 span:nth-of-type(1)::before{
    position: absolute;
    font-size: 1.3em;
    color: #aaa;
    top: -1.5em;
    font-weight: 100;
}
#mokuteki{
    margin-bottom:5em;
}
#mokuteki h3 span:nth-of-type(1){
    margin-right: 1em;
    background: #64be97;
}
#mokuteki h3 span:nth-of-type(2){
    font-size:.7em;
    margin-left:.5em;
}
#shudan h3 span{
    margin-left:1em;
    background:#6cafe5;
}
#mokuteki h3 span:nth-of-type(1)::before{
    content: 'objective';
    left: -2em;
    transform: rotate(-11deg);
}
#shudan h3 span:nth-of-type(1)::before{
    content: 'means';
    right: -2em;
    transform: rotate(11deg);
}
#mokuteki div p:nth-of-type(1),
#shudan div p:nth-of-type(2){
    padding:1em;
}
#mokuteki div p:nth-of-type(2),
#shudan div p:nth-of-type(1){
    width:30%;
    border-radius: 2em;
    overflow: hidden;
    box-shadow: .1em .1em .5em #aaa;
}
@media screen and (max-width:699px){
    #about{
        background:linear-gradient(#fafafa 8em,white);
        padding-bottom:0;
    }
    #about::before{
        height:8em;
    }
    #about>div{
        padding:0 1em;
    }
    #about h2{
        font-size:3em;
    }
    #about .flex>*{
        width:100%;
    }
    #about .flex>div:nth-of-type(1){
        margin-bottom:2em;
    }
    #about h3 span:nth-of-type(1)::before{
        font-size:1em;
        top:-2.5em;
    }
    #mokuteki h3 span:nth-of-type(1)::before{
        left:0;
    }
    #mokuteki div p:nth-of-type(2),
    #shudan div p:nth-of-type(1){
        width:100%;
    }
    #shudan h3{
        margin-top:4em;
    }
    #shudan h3 span{
        position: absolute;
        right: 1em;
        top: -2em;
    }
    #shudan h3 span:nth-of-type(1)::before{
        right:-.5em;
    }
    #mokuteki div p:nth-of-type(1),
    #shudan div p:nth-of-type(2){
        padding:1em 0;
    }
}
/*---------------------------*/
/*service*/
#service{
    background:url(img/service.png);
    padding: 0 0 5em;
}
#service::before,
#servicetop::before,
#servicebottom::before{
    content:"";
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    mix-blend-mode:color;
    background:var(--blueback);
}
#service h2{
    margin-bottom: 3em;
}
#service li{
    width: 32%;
    background: white;
    border-radius: 2em;
    padding-bottom: 2em;
    margin-bottom: 6em;
}
#service .serviceimg{
    border-radius: 2em 2em 0 0;
    overflow: hidden;
}
#service .servicetext {
    padding: 1em;
}
.servicetext>div:nth-of-type(1){
    width:100%;
}
#service h3{
    font-size:1.5em;
    margin-top:1em;
    margin-bottom:1.5em;
    text-align:center;
}
#service h3::before{
    content:"";
    position: absolute;
    height:1px;
    background:#aaa;
    width:100%;
    left:0;
    bottom:-.3em;
}
.number{
    position:absolute;
    width:auto !important;
}
.numbertop{
    right:0;
    top:-2.2em;
    font-size:2em;
    z-index:2;
}
.numbertop span{
    line-height:1em;
    font-size:2em;
}
.numberbottom{
    top:-3.2em;
    font-size:2.5em;
    left:0;
    display: none;
}
.numberbottom span{
    display:block;
    line-height:1em;
    font-size:2.2em;
}
.number{color:white;padding:.5em 1em 1em;}
.number1{background:url(img/service1.png) center no-repeat;background-size:100% 100%;}
.number2{background:url(img/service2.png) center no-repeat;background-size:100% 100%;}
.number3{background:url(img/service3.png) center no-repeat;background-size:100% 100%;}
.number4{background:url(img/service4.png) center no-repeat;background-size:100% 100%;}
.number5{background:url(img/service5.png) center no-repeat;background-size:100% 100%;}
.number6{background:url(img/service6.png) center no-repeat;background-size:100% 100%;}

#servicetop{
    height:10em;
    background:white url(img/servicetop.png)center no-repeat;
    background-size:100% 100%;
}
#servicebottom{
    height:15em;
    background:white url(img/servicebottom.png)center no-repeat;
    background-size:100% 100%;
}
@media screen and (max-width:699px){
    #servicetop{
        height:8em !important;
    }
    #service{
        padding:0 1em 5em !important;
        margin-bottom:0;
    }
    #service h2{
        font-size:2.3em;
    }
    #service li{
        margin-top:8em;
        width:100%;
    }
    #service li::before,
    #service li::after{
        content:none;
    }
    #service li:last-of-type{
        margin-bottom:0 !important;
    }
    #service h3{
        margin-top:1em;
        margin-bottom:1.5em;
        font-size:1.5em;
    }
    .numberbottom{
        display:none;
    }
    #servicebottom{
        height:6em;
    }
}
/*---------------------------*/
/*play*/
#play{
    padding:8em 0 5em;
    width:100%;
    overflow: hidden;
}
#play>div{
    background: linear-gradient(var(--blueback) 80%,white);
    padding: 7em 0 0;
    margin-top:5em;
}
#play li{
    margin-bottom:11em;
}
#play li::before{
    content:"";
    position:absolute;
    height:100%;
    top:-3em;
    background:white;
    width:100%;
}
#play li:nth-of-type(odd)::before{
    right:40%;
}
#play li.flex>*{
    width:50%;
}
#play .numbertop{
    display: none;
}
#play li .servicetext{
    margin-top:-5em;
    padding:0 3em;
}
#play .serviceimg{
    border-radius: 2em;
    overflow: hidden;
}
#play li:nth-of-type(odd) .serviceimg{
    -webkit-order:1;
    order:1;
}
#play li:nth-of-type(even)::before{
    left:40%;
}
#play li:last-of-type{
    margin-bottom:3em;
}
#play h3::before{
    content:"";
    position: absolute;
    height:1px;
    background:#aaa;
    left:0;
    width:100%;
    bottom:-.3em;
}
#play h3::after{
    content: '';
    width: 1em;
    height: 2em;
    position: absolute;
    top: -1em;
}
#play li:nth-of-type(odd) h3::after{
    background: url(img/h2l.png) center no-repeat;
    background-size: 100% 100%;
    left: -1.2em;
    transform: rotate(35deg);
}
#play li:nth-of-type(even) h3::after{
    background:url(img/h2r.png) center no-repeat;
    background-size:100% 100%;
    right:0;
    transform:rotate(-35deg);
}
#play h3 span{
    font-size:.8em;
}
@media screen and (max-width:699px){
    #play{
        padding:3em 1em 0;
    }
    #play .flex>*{
        width:100% !important;
    }
    #play li{
        margin-bottom:3em;
    }
    #play li::before{
        content:none;
    }
    #play>div{
        padding:3em 0 0;
    }
    #play li .servicetext{
        margin-top:1em;
        padding:0;
    }
    #play h3::after{
        content:none;
    }
}
/*---------------------------*/
/*sanka*/
#sanka{
    background:url(img/service.png);
    padding: 0 0 5em;
    background-size:cover;
}
#sankaball{
    height:10em;
    background:white url(img/servicetop.png)center no-repeat;
    background-size:100% 100%;
}
#sankaball::before,
#sanka::before{
    content:"";
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    mix-blend-mode:color;
    background:var(--blueback);
}
#sanka th,
#sanka td{
    margin-bottom:.2em;
    background:white;
}
#sanka th{
    width:15em;
    margin-right:.2em;
}
#sanka td{
    width:30em;
}
#sanka th span{
    font-size:.7em;
    color:red;
}
#sanka td span{
    font-size:.7em;
    margin-left:.5em;
    font-weight: bold;
}
@media screen and (max-width:699px){
    #sanka h2{
        font-size:1.5em;
    }
}
/*---------------------------*/
/*footer*/
footer{
    padding:5em 0;
    padding-top:3em;
    overflow:hidden;
    background:white;
    border-top:.5em solid var(--bluemaincolor);
}
#footerlogo{
    font-size:1.5em;
}
#footerlogo span{
    font-size:.5em;
}
#footerlogo img{
    display: inline;
    width:7em;
}
/*---------------------------*/
/*sns*/
#sns li a{
    display:block;
    margin:1em .5em;
    width:1.5em;
    height:1.5em;
    padding:.5em;
    border-radius:.5em;
    transition-duration:0.4s;
}
#sns li a:hover{
    opacity:.7;
}
.insta {
    background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
    background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
}
.lineicon {
    background: #02b902;
}
.youtube{
    background:#ff0033;
}
#copyright{
    padding:1em 0;
    color:white;
    background:var(--bluegrada);
}
#copyright a{
    color:white;
}
/*sp*/
@media screen and (max-width:699px){
    #sns{
        margin-top:2em;
    }
    .footerlogo{
        margin-bottom:1em;
    }
}
/*---------------------------*/
/*影あり*/
.shadowon{
    box-shadow:.3em .3em .7em #aaa;
}
/*---------------------------*/
/*表示アニメーションあり*/
#shamei{
    transform:translate(2em,0);
    opacity: 0;
    transition-duration:1s;
}
.inviews{
    transform:translate(0,4rem);
    opacity: 0;
    transition-duration:2s;
}
#topbtn li:nth-of-type(2),
#service li:nth-of-type(2){
    -webkit-transition-delay:.3s;
    transition-delay:.3s;
}
#service li:nth-of-type(3){
    -webkit-transition-delay:.6s;
    transition-delay:.6s;
}
#sns li{
    transform:rotate(90deg) translate(0,2em);
    transform-origin:right bottom;
    opacity: 0;
    transition-duration:1s;
}
#sns li:nth-of-type(2),
#service li:nth-of-type(3n+2){
    -webkit-transition-delay:.2s;
    transition-delay:.2s;
}
#sns li:nth-of-type(3),
#service li:nth-of-type(3n+3){
    -webkit-transition-delay:.4s;
    transition-delay:.4s;
}
.inviewons{
    transform:rotate(0deg) translate(0,0) !important;
    opacity: 1 !important;
}
/*---------------------------*/
/*mypage*/
#page header{
	padding:6em 0 5em;
	background:#f1f1f1;
}
#page h2{
	margin-bottom:0;
}
#username span{
	font-weight: bold;
}
#pagebody{
	padding:5em 0;
}
#calendar{
    height: 15em;
    width: 15em;
}
#invoice{
	margin-right:auto;
	width: calc(100% - 20em);
}
#invoice li{
	border-bottom:1px dotted #aaa;
	padding-bottom: .5em;
}
.invoicebtn{
    margin-left: auto;
    background: #327eca;
    color: white;
    padding: 0 .5em;
    border: .1em solid white;
    border-radius: 1em;
    box-shadow: .1em .1em .3em #aaa;
	transition-duration:0.4s;
}
.invoicebtn:hover{
	background:#55bfb0;
	box-shadow: 0 0 .1em #aaa;
}
@media screen and (max-width:699px){
	#page header{
		padding: 4em 0 2em;
	}
	#pagebody {
    	padding: 2em 1em 5em;
	}
	#invoice{
		width:100%;
	}
	.invoicebtn{
		display: block;
		width: 8em;
	    text-align: center;
	}
	#calendar{
		width:100%;
		height:30em;
		margin-top:3em;
	}
}
/*---------------------------*/
/*archive*/
#archive{
    padding:5em 0 10em;
    min-height:50vh;
}
#archive h2{
    width:80%;
    margin:0 auto 2em;
    border-bottom:1px solid #aaa;
    padding-bottom:.5em;
}
#archive ul{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3%;
}
#archive li{
    width: 100%;
    margin: 0 auto 3em;
    border: 1px solid #ddd;
    padding: 1em;
    border-radius: 1em;
    box-shadow: .1em .1em .3em #aaa;
}
#archive .player{
    aspect-ratio:16/9;
}
#archive iframe{
    height:100%;
    object-fit: cover;
}
#archive .date{
    text-align: right;
    font-size:.7em;
}
#loginform{
    width: 30em;
    margin: 3em auto;
}
#loginform p{
    margin-bottom:1em;
    text-align: center;
}
#loginform .flex>span:nth-of-type(1) {
    width: 6em;
}
#loginform .flex>span:nth-of-type(2) {
    width: calc(100% - 6em);
}
#loginform input:not([type=submit]) {
    box-sizing: border-box;
    border: 1px solid #ddd;
    width: 100%;
    line-height: 1.5em;
    padding: .5em;
}
#loginform input[type=submit] {
    background: #6eb0b1;
    color: white;
    padding: .5em 5em;
    border-radius: .5em;
    border: 2px solid white;
    box-shadow: .2em .2em .5em #ddd;
}
@media screen and (max-width:699px){
    #archive ul{
        padding:0 1em;
		display: block;
    }
    #archive li{
        width:100%;
		
    }
    #loginform{
        width:100%;
        padding:0 2em;
        box-sizing: border-box;
    }
}
/*---------------------------*/
/*pop ball*/
#ball01{width:14em;right:5%;bottom:0;}
#ball02{width:5em;left:5%;top:2em;}
#ball03{width:8em;right:5%;top:50%;}
#ball04{width:14em;left:3%;bottom:55%;}
#ball05{width:10em;right:35%;bottom:0;}
#ball06{width:6em;right:12%;top:2em;}
#ball07{width:15em;left:5%;bottom:-12em;}
#ball08{width:7em;right:5%;top:24%;}
.ball{z-index:1;position: absolute;}
.ball img{box-shadow:none !important;}
@media screen and (max-width:699px){
    #ball01{width:7em;right:5%;bottom:1em;}
    #ball02{width:5em;left:3%;top:6em;}
    #ball03{display:none;}
    #ball04{width:4em;left:5%;bottom:10%;}
    #ball05{display:none;}
    #ball06{width:3em;right:3%;top:-1em;}
    #ball07{width:5em;left:2%;bottom:-3em;}
    #ball08{width:3em;right:3%;top:14%;}
}
/*------------------------------------*/
.txl{text-align: left !important;}
.txc{text-align: center !important;}
.txr{text-align: right !important;}
@media screen and (min-width:700px){
    #wrap,#navi{min-width:1240px;}
    .ddn{display:none !important;}
    .minwidth{width:80%;margin:0 auto;min-width:1240px;}
    .flexcenter{display:-webkit-box;display:flex;align-items:center;-webkit-justify-content:center;justify-content:center;}
    .flex{display:-webkit-box;display:flex;}
    .flexwrap{-webkit-flex-wrap:wrap;flex-wrap:wrap;}
    .itemstart{align-items: flex-start;}
    .itemcenter{align-items: center;}
    .itemend{align-items: flex-end;}
	.itemstart{align-items: flex-start;}
    .justifyspace{-webkit-justify-content:space-between;justify-content:space-between;}
    .justifyaround{-webkit-justify-content:space-around;justify-content:space-around;}
    .justifycenter{-webkit-justify-content:center;justify-content:center;}
}
@media screen and (max-width:699px){
    body{font-size:14px;}
    .mdn{display:none !important;}
    .m_flexcenter{display:-webkit-box;display:flex;align-items:center;-webkit-justify-content:center;justify-content:center;}
    .m_flex{display:-webkit-box;display:flex;}
    .m_flexwrap{-webkit-flex-wrap:wrap;flex-wrap:wrap;}
    .m_itemstart{align-items: flex-start;}
    .m_itemcenter{align-items: center;}
    .m_itemend{align-items: flex-end;}
    .m_justifyspace{-webkit-justify-content:space-between;justify-content:space-between;}
    .m_justifyaround{-webkit-justify-content:space-around;justify-content:space-around;}
    .m_justifycenter{-webkit-justify-content:center;justify-content:center;}
}