/*
Theme Name:independentOne
Author:kenta mimura
Version:1.0
*/

@charset "utf-8";
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,img,dl,dt,dd,ol,ul,li,b,i,form,label,strong,em{margin:0;padding:0;border:0;vertical-align:baseline;}
body{background:#fff;font-size:16px;line-height:2;-webkit-text-size-adjust:100%;}
table,caption,tbody,tfoot,thead,tr,th,td{font-weight:normal;vertical-align:top;font-weight:normal;}
h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p{padding:0;margin:0;font-size:1rem;line-height:2.0em;font-weight:normal}
p{margin-bottom:1.5em;}
a{color:inherit;}
img,a{border:0;outline:none;}
address{font-style:normal;}
html,body{scroll-behavior:smooth;}
html {scroll-padding-top:178px;}
body{font-family:"Noto Sans JP", sans-serif;}

@media all and (min-width:768px){html {scroll-padding-top:278px;}}

/* Base */
element or parent element{width:100%;height:auto;min-height:1px;max-height:999999px;}
@media all and (min-width:600px){a[href^="tel:"]{pointer-events:none;color:inherit;text-decoration:none;}
}
nav ul,
aside ul{list-style:none;}
nav a,
aside a{text-decoration:none;}

a{opacity:1;transition:0.3s ease-in-out;}
.hidden{position:absolute;width:1px;height:1px;padding:0;margin-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.block{display:block;}
.none{display:none;}
.iblock{display:inline-block;}
.inline{display:inline;}
.flex{display:flex;display:-webkit-flex;}
.wrap{flex-wrap:wrap;-webkit-flex-wrap;}
.jca{justify-content:space-around;-webkit-justify-content:space-around;}
.jcb{justify-content:space-between;-webkit-justify-content:space-between;}
.jcc{justify-content:center;-webkit-justify-content:center;}
.tac{text-align:center;}
.tar{text-align:right;}
.clear{clear:both;}
.pd0{padding:0;}
.pd10{padding:10px;}
.pd15{padding:15px;}
.pd20{padding:20px;}

.inner{position:relative;max-width:1200px;margin:0 20px;}

@media all and (min-width:600px){
.inner{margin:0 40px;}
}

@media all and (min-width:1230px){
.inner{margin:0 auto;}
}

/* TopMovie */
#kv{width:100%;height:100svh;margin-bottom:60px;}
#kv .video{position:relative;z-index:100;width:100%;height:70%;overflow:hidden;}
#kv .video video{width:100%;height:100%;object-fit:cover;}
#kv .fullversion{position:absolute;top:calc(70% - 40px);right:15px;background:url(img/fv.svg) no-repeat right center;background-size:contain;z-index:1000;}
#kv .fullversion a{display:block;height:15px;line-height:15px;padding-right:40px;font-size:14px;color:rgba(255,255,255,0.67);font-weight:300;text-decoration:none;line-height:15px;}
#kv .fullversion a:hover{color:#fff;}
#kv .scrolldown{display:grid;height:30%;place-items:center;overflow:hidden;}
#kl{position:absolute;top:35%;left:50%;z-index:120;width:50%;max-width:380px;transform:translate(-50%,-50%);}
.btn {height:50%;color:#828282;font-size:12px;text-decoration:none;}
.circle-arrow {position:relative;width:auto;height:30%;max-height:40px;aspect-ratio:1 / 1;border:1px solid #828282;border-radius:50%;position:relative;margin:30% auto 12px;animation:pulse 2s infinite;}
.circle-arrow::after {content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;border-left:1px solid #828282;border-bottom:1px solid #828282;transform:translate(-50%, -50%) rotate(-45deg);}
@keyframes pulse {0% {transform:scale(1);}50% {transform:scale(1.1);}100% {transform:scale(1);}}

@media (min-width:600px) {
#kv .video{height:80%;}
#kl{top:40%;}
#kv .fullversion{top:calc(80% - 40px);}
#kv .scrolldown{height:20%;}
.circle-arrow {height:50%;margin:20% auto 12px;}
.circle-arrow::after{width:10px;height:10px;}
}

@media (min-width:1230px) {
#kv .fullversion{position:absolute;right:initial;left:50%;margin-left:484px;}
}

/* Header / Footer */
#header{position:sticky;top:0;z-index:10;background:#fff;padding:36px 0 20px;margin-bottom:156px;box-shadow:0px 6px 6px 0px rgba(128,128,128,0.5);}
#header .inner{margin:0 14px 0 20px;}
#header.fixed{position:fixed;top:0;right:0;left:0;z-index:9999;}
#logo,
#flogo{width:auto;background:url(img/logo.svg) no-repeat;background-size:contain;}
#logo{width:180px;height:29px;}
#flogo{width:175px;height:28px;}
#logo a,
#flogo a{display:block;width:100%;height:100%;}
#flogo{margin:0 0 0 auto;}
#header nav{position:absolute;right:0;top:50%;transform:translateY(-50%);}
#footer{margin-top:160px;}
#footer nav{position:absolute;left:0;top:50%;transform:translateY(-50%);}

@media (min-width:600px) {
#header .inner{margin:0 34px 0 40px}
#logo{width:280px;height:44px;}
#flogo{width:250px;height:41px;}
}

@media (min-width:768px) {
#header{padding:56px 0 20px;}
}

@media (min-width:1230px) {
#header .inner{margin:0 auto;}
}

nav > ul{display:flex;gap:35px;}
nav ul.sns{display:flex;gap:20px;padding:7px 0;margin-left:10px;}
nav a{color:#000;opacity:1;transition:width 0.5s ease;}
nav a:hover{opacity:0.7;}
nav .sns{padding-left:15px;}
.sns li a{display:block;width:auto;background-repeat:repeat;background-size:cover;}
.sns li.yt a{background-image:url(img/yt.svg);aspect-ratio:3/2;}
.sns li.ig a{background-image:url(img/ig.svg);aspect-ratio:1/1;}
#header .sns li.yt a,
#header .sns li.ig a{height:20px;}
#footer .sns li.yt a,
#footer .sns li.ig a{height:17px;}
nav > ul > li > a{position:relative;display:block;overflow:hidden;}
#header nav > ul > li > a{font-size:14px;}
#footer nav > ul > li > a{font-size:12px;}
nav > ul > li > a::after{content:"";position:absolute;left:0;bottom:0;width:0%;height:1px;background-color:#333;transition:width 0.3s ease;}
nav > ul > li > a:hover::after {width:100%;}

.hidden{
position:absolute !important;
width:1px;height:1px;
padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);
white-space:nowrap;border:0;
}


/* ハンバーガーボタン（PCでは非表示） */
.menu-toggle{
display:none;
background:none;
border:none;
padding:6px;
cursor:pointer;
}
/* アイコンの土台 */
.menu-icon{
position:relative;
width:28px;
height:24px;
display:inline-block;
}

.menu-icon .bar{position:absolute;left:0;right:0;height:1px;background-color:rgb(0,0,0);border-radius:2px;transition:transform 200ms ease, opacity 200ms ease, top 200ms ease, bottom 200ms ease;}
.menu-icon .bar:nth-child(1){top:2px;}
.menu-icon .bar:nth-child(2){top:11px;}
.menu-icon .bar:nth-child(3){bottom:2px;}
.menu-toggle[aria-expanded="true"] .bar:nth-child(1){top:11px;transform:rotate(45deg);}
.menu-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] .bar:nth-child(3){bottom:auto;top:11px;transform:rotate(-45deg);}


@media (max-width:999px){
#header{margin-bottom:106px;}
nav a:hover{opacity:1;}
#header nav{top:49px;transform:none;}
.menu-toggle{position:absolute;display:block;top:0;right:0;}
#global-nav{display:none;width:100%;position:absolute;left:-15px;right:-15px;border:solid 15px rgba(255,255,255,0.9);z-index:10;}
#global-nav[data-open="true"]{display:block;}
#global-nav > ul{display:block;padding:12px 16px;background:#fff;}
#global-nav > ul > li{list-style:none;margin:0;padding:0;}
#global-nav > ul > li > a{display:block;padding:12px 8px;border-bottom:1px solid #ccc;}
#global-nav > ul > li:last-child > a{border-bottom:none;}
#global-nav > ul > li > a::after{display:none;}
#global-nav .sns{padding:15px 8px 3px;gap:16px;margin-left:0;}
#footer{margin-top:120px;}
#footer nav{display:none;}
}

#copyright{width:100%;max-width:1200px;padding:12px 20px;margin:0 auto;font-size:10px;text-align:right;box-sizing:border-box;}
@media (min-width:600px) {
#copyright{padding:12px 40px;}
}
@media (min-width:1000px) {#copyright{margin:20px auto 0;}
}

/* Top */
main{padding:0;}
main#page{padding:270px 40px 0;}
main#archive,
main#post{padding-top:270px;}


#blog h1.title,
main#page h1,
h2.title{margin-bottom:60px;font-size:24px;color:#000;}
main#post h1{margin-bottom:30px;font-size:24px;color:#000;}

@media (max-width:767px){
main#archive,
main#post,
main#page{padding-top:170px;}
main#page h1,
h2.title{margin-bottom:30px;}
main#post h1{margin-bottom:15px;}
}

@media (max-width:599px){
main#page h1,
main#post h1,
h2.title{font-size:21px;}
main#page{padding-left:20px;padding-right:20px;}
}


/* Blog Grid */
#blog{max-width:1200px;padding:0 20px;margin:0 auto 60px;}
#blog ul{display:grid;width:100%;gap:40px;grid-template-columns:repeat(1, 1fr);width:100%;box-sizing:border-box;}
#blog ul li {width:100%;max-width:480px;}
#blog ul li a{display:block;text-decoration:none;color:#000;}
#blog ul li figure{position:relative;width:100%;margin-bottom:20px;overflow:hidden;}
#blog ul li figure img{display:block;width:100%;height:100%;}
#blog ul li .wp-block-post-date{margin-bottom:10px;font-size:14px;line-height:1;}
#blog ul li h3{font-size:17px;line-height:1.5;}
#post .wp-block-post-date time,
#post .taxonomy-category.post-cat a{font-size:14px;text-decoration:none;}
#post .taxonomy-category.post-cat a:hover{text-decoration:underline;}
#post .taxonomy-category.post-cat a[href$="/all/"][rel="tag"] {display:none;}
@media (min-width:480px) {
#blog ul{grid-template-columns:repeat(2, 1fr);}
}

@media (min-width:600px) {
#blog{padding:0 40px;}
#blog ul{gap:60px;}
#blog ul li {padding-bottom:60px;}
}

@media (min-width:1000px) {
#blog{margin-bottom:120px;}
#blog ul li{max-width:360px;}
#blog ul li:hover{text-decoration:underline;}
#blog ul li figure img{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);transition:0.3s ease-in-out;opacity:1;}
#blog ul li:hover figure img{width:105%!important;height:105%!important;opacity:0.8}
}

@media (min-width:811px) {#blog ul{grid-template-columns:repeat(3, 1fr);}}


.more{overflow:hidden;}
.more a{position:relative;float:right;display:block;padding:0 20px 5px 0;font-size:12px;text-decoration:none;line-height:1;transition:0.3s ease-in-out;opacity:1;}

.more a::before,
.more a::after{content:"";position:absolute;right:0;bottom:0;background:#000;}
.more a::before{left:0;width:100%;height:1px;}
.more a::after{width:15px;height:7px;background:url(img/arrow.svg) no-repeat left top;}

@media (min-width:768px) {
.more a{margin-right:20px;}
.more a:hover{padding-right:40px;margin-right:0;}
.more a::before,
.more a::after{transition:0.2s ease-in-out;}

}

@media (max-width:599px){
.more{margin-top:60px;}
}

/* YouTube Section */
.videos{max-width:1200px;padding:0 20px;}
.videos .videoList {display:flex;flex-wrap:wrap;}
.video-box{width:100%;margin-bottom:40px;}
.video-box .video{width:100%;aspect-ratio:16 / 9;margin-bottom:20px;}
.video-box .video iframe {display:block;width:100%;height:100%;}
.video-box h3{margin-bottom:15px;font-size:14px;line-height:1;}
.video-box h4{font-size:17px;line-height:1;}

@media (min-width:600px) {
.videos{padding:0 40px;}
}
@media (min-width:768px) {
.videos{margin-bottom:60px;}
.videos .videoList{gap:60px;justify-content:center;}
.video-box {width:calc(50% - 30px);}
}

@media (min-width:1200px) {
.videos{margin:0 auto 60px;}
}


#about{max-width:1200px;padding:100px 20px 0;margin:0 auto 60px;}
#about .innerBox{display:flex;gap:20px;margin:0;font-size:14px;}
#about .leftBox{flex:2;}
#about .rightBox{flex:1;}
#about figure{margin:0;}

@media (min-width:600px) {
#about{padding:100px 40px 0;}
}

@media (min-width:768px) {#about{padding-top:160px;margin-bottom:125px;}}
@media (min-width:1201px) {#about{margin-bottom:140px;}}

#gmap{height:500px;}
@media (min-width:600px) {
#gmap{height:700px;}
}


main#post{display:flex;flex-wrap:wrap;width:100%;max-width:1200px;margin:0;padding-left:20px;padding-right:20px;box-sizing:border-box;}
#mainCont{width:100%;max-width:800px;margin:0 auto;}

@media (min-width:600px) {
main#post{padding-left:40px;padding-right:40px;}
}

@media (min-width:1000px) {
main#post{display:flex;gap:60px;flex-wrap:nowrap;}
#mainCont{width:calc(100% - 320px);margin:0;}
}

@media (min-width:1231px) {main#post{padding-left:0;padding-right:0;margin:0 auto;}}

#pagenation{width:100%;overflow:hidden;}
#pagenation a{position:relative;display:inline-block;font-size:12px;text-decoration:none;line-height:1;transition:0.3s ease-in-out;opacity:1;}
#pagenation a.wp-block-query-pagination-previous{float:left;padding:0 0 5px 20px;margin-left:20px;}
#pagenation a.wp-block-query-pagination-next{float:right;padding:0 20px 5px 0;margin-right:20px;}
#pagenation a:hover{opacity:0.7;}
#pagenation a.wp-block-query-pagination-previous:hover{padding-left:40px;margin-left:0;}
#pagenation a.wp-block-query-pagination-next:hover{padding-right:40px;margin-right:0;}
#pagenation a::before,
#pagenation a::after{content:"";position:absolute;bottom:0;background:#000;transition:0.2s ease-in-out;opacity:1;}
#pagenation a::before{left:0;width:100%;height:1px;}
#pagenation a::after{width:15px;height:7px;background:url(img/arrow.svg) no-repeat left top;}
#pagenation a::before:hover,
#pagenation a::after:hover{opacity:0.7;}
#pagenation a.wp-block-query-pagination-previous::after{transform:scaleX(-1);}
#pagenation a.wp-block-query-pagination-previous::before,
#pagenation a.wp-block-query-pagination-previous::after{left:0;}
#pagenation a.wp-block-query-pagination-next::before,
#pagenation a.wp-block-query-pagination-next::after{right:0;}

#postNavi{position:relative;border-top:solid 1px #aaaaaa;border-bottom:solid 1px #aaaaaa;padding:25px 0;}
#postNavi::after{content:"";display:block;position:absolute;top:26px;bottom:26px;width:1px;height:auto;background:#aaaaaa;left:50%;}
#postNavi .post-navigation-link-previous a,
#postNavi .post-navigation-link-next a{display:block;position:relative;padding:25px 0;font-size:15px;line-height:1.5;transition:0.2s ease-in-out;}

#postNavi .post-navigation-link-previous a:empty::before,
#postNavi .post-navigation-link-next a:empty::before,
#postNavi .post-navigation-link-previous a:empty::after,
#postNavi .post-navigation-link-next a:empty::after{display:none;}

#postNavi .post-navigation-link-previous a::before,
#postNavi .post-navigation-link-next a::before{display:block;position:absolute;top:0;color:#777777;font-size:12px;line-height:1;white-space:nowrap;}

#postNavi .post-navigation-link-previous a::before{content:"Previous post";left:0;}
#postNavi .post-navigation-link-next a::before{content:"Next post";right:0;text-align:right;}

#postNavi .post-navigation-link-previous a::after,
#postNavi .post-navigation-link-next a::after{content:"";display:block;position:absolute;bottom:0;width:55px;height:6px;background:url(img/arrow2.svg) no-repeat right bottom;}

#postNavi .post-navigation-link-previous a::after{left:0;transform:scaleX(-1);}
#postNavi .post-navigation-link-next a::after{right:0;}


#post .wp-block-post-date{margin-bottom:15px;line-height:1;}
#post .taxonomy-category.post-cat{margin-bottom:60px;line-height:1;}
#post .taxonomy-category.post-cat{display:flex;gap:10px;}
#post .taxonomy-category.post-cat a{display:inline-block;}
#post .entry-content{margin-bottom:150px;}
#post .wp-block-post-terms__separator{display:none;}

@media (max-width:999px) {
#post .entry-content{margin-bottom:120px;}
#pagenation a.wp-block-query-pagination-previous{margin-left:0;}
#pagenation a.wp-block-query-pagination-next{margin-right:0;}

}

@media (max-width:767px) {
#postNavi .post-navigation-link-previous a, #postNavi .post-navigation-link-next a{font-size:13px;}
}


.formCont{display:flex;flex-wrap:wrap;gap:40px;font-size:14px;}
.formCont .half,
.formCont .full{width:100%;}
.formCont span.ftit{display:block;margin-bottom:15px;line-height:1;}
.formCont input,
.formCont textarea{width:100%;padding:10px;border:solid 1px #aaaaaa;margin:0;box-sizing:border-box;line-height:20px;}
.formCont input[type="submit"]{width:60px;background:#4c4c4c;border:none;border-radius:3px;font-size:15px;color:#fff;line-height:20px;}
.formCont h2{width:100%;margin-bottom:20px;font-size:20px;}
#privacy{width:100%;height:200px;padding:15px;margin-top:-40px;border:solid 1px #aaaaaa;box-sizing:border-box;overflow-y:scroll;}
#privacy ol{counter-reset:item;padding-left:1.5em;}
#privacy ol li {list-style:none;counter-increment:item;position:relative;}
#privacy ol li::before {content:counter(item) ")";position:absolute;left:-1.5em;}
#privacy p,
#privacy li{font-size:14px;}

@media (min-width:768px) {
.formCont .half{width:calc(50% - 20px);}
#privacy{padding:40px;}
}

.entry-content p,
.entry-content li,
.entry-content th,
.entry-content td,
.entry-content div{font-size:14px;}

#side{width:260px;}
#side h2{padding-bottom:20px;border-bottom:solid 1px #aaaaaa;margin-bottom:35px;font-size:16px;}
#side .categories{margin-bottom:110px;}
#side .categories li{margin-bottom:10px;font-size:14px;}
#side .categories li a{display:inline-block;width:60px;}
#side .recent li{margin-bottom:25px;}

#side figure{aspect-ratio:1 / 1;margin-bottom:5px;}
#side h3{margin-bottom:3px;font-size:15px;}
#post #side  .wp-block-post-date time{font-size:12px;}


@media (min-width:1000px) {
#side .recent ul li figure a{display:block;position:relative;width:100%;overflow:hidden;}
#side .recent ul li figure a img{width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);opacity:1;transition:0.3s ease-in-out;}
#side .recent ul li figure a:hover img{width:105%;height:105%;opacity:0.8}
}

@media (max-width:999px) {
#side{width:100%;max-width:800px;margin:120px auto 0;}
#side .categories{margin-bottom:60px;}
#side .categories ul,
#side .recent ul{display:flex;gap:20px;flex-wrap:wrap;}
#side .categories li,
#side .recent li{margin:0;}
#side .recent li{width:calc(33% - 13px);}
#side .recent figure{width:100%;height:auto;}
}

@media (max-width:767px) {
#side .recent li{width:calc(50% - 10px);}
}

@media (max-width:599px) {
#side h2{padding-bottom:10px;margin-bottom:30px;}
#side .categories li{line-height:1;}
#side .categories li a{width:auto;}
}

@media (max-width:479px) {
#side .recent li{width:100%;}
}

.fadein {opacity: 0;transform: translateY(20px);transition: opacity 0.8s ease, transform 0.8s ease;}
.fadein.is-show {opacity: 1;transform: translateY(0);}
