/*
Theme Name: Lightning Child
Theme URI:https://lightning.vektor-inc.co.jp/en/
Template: lightning
Description:
Author:
Tags:
Version: 0.6.1
*/

body,html,footer {
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝","Noto Serif JP", serif !important;
		
}
	.site-body{
		padding-top:0 !important;
}

/*カラムの画像とテキストのスマホ表示順を指定*/

	@media (max-width: 768px) {
    	.Display_order {
        	flex-direction: column-reverse;
}   
}

		.page-header {
			background-image: url(https://itsukicre.com/wp/wp-content/uploads/2024/07/header.jpg) !important;
			height:200px;
}

			.grecaptcha-badge { visibility: hidden; }

/*コピーライト非表示*/

		.site-footer-copyright p:nth-child(2){
    		display:none !important;
} 
		.bogo-language-switcher{
			display:none;
}

/*リキャプチャロゴ削除*/
		.grecaptcha-badge {
			visibility: hidden;
}

	.content_full, .content_full_1{
		margin: 0 calc(50% - 50vw) !important;
}

/*メインビジュアル*/

	.pc-video {
    	display: block;
    
}

	.sp-video {
    	display: none;
}

	.main_mv video{
		max-width:100%;
}
 
	 video::cue(.fontblack) {
        text-shadow: 1px 1px 4px rgba(255,255,255,0.8);
        background-color: rgba(75,59,42,0.2);
        color:#fff;
		
}

	video::cue(.fontwhite) {
        text-shadow: 1px 1px 4px rgba(255,255,255,0.8);
        background-color: rgba(75,59,42,0.2);
        color: #fff;
		
}

    @media (min-width: 1024px){
    video::cue(.fontblack,.fontwhite){
        font-size: 24px;
		line-height:1em;
		background-size:auto 60%;
}
	.main_mv{
		margin-top:-2vh;
		
}
}
    @media (min-width: 576px)and (max-width: 1023.98px){
	video::cue(.fontblack,.fontwhite){
        font-size: calc( 22vw / 10.24);
}

}

	@media (max-width: 576px){
   	video::cue(.fontblack,.fontwhite){
        font-size: calc( 20vw / 5.76);
}     

	.pc-video {
    	display: none;
}

    .sp-video {
    	display: block;
		width:100%;
} 
}


/*---------------グローバルナビ　カスタマイズ---------------*/

	@media (min-width: 992px){
	/* サイトロゴとヘッダーナビを縦に積む。中央配置も追加 */
		div#site-header-container {
			display: block;
			text-align: center;
			max-width:100vw;
			margin:0 auto;
}
		
	/* ヘッダーナビをコンテンツ幅いっぱいに広げる */
		body:not(.header_scrolled) .global-nav--layout--float-right {
			display: block;
			width: 100%;
			padding-bottom:0.5vh;
			margin-top:0;
}
		
		.global-nav-list {
			justify-content: space-between;
			margin: 0 auto !important;
}
		
	/* サイトロゴを中央配置とする */
		.site-header--layout--nav-float .site-header-logo {
			display: inline-block;
			width: auto;
			margin-right: 0;
}

		.site-header-logo{
			padding-bottom:0 !important;
			margin-bottom:0 !important;
			padding-top:0.5vw;
}
		
	/* スクロール時にロゴ画像を非表示とする */
		.header_scrolled .site-header-logo{
			display: none;
}

		.header_scrolled .site-header{
			/*opacity:0.8;*/
			padding-bottom:0.5vh;
}
		
	.site-header-logo img{
		width:80% !important;
		text-align:center !important;
		margin:0 auto !important;
}
}

	@media (min-width: 576px)and (max-width: 1023.98px){
		.site-header{
			/*height:7vh;*/
}
}

	@media (max-width: 575.98px){
		.site-header{
			/*height:15vh;*/
}
}

	@media (min-width: 820.98px)and (max-width: 1396px){
		.device-pc .global-nav-list>li>a{
			padding:0.8vw;
}
		#menu-item-314,#menu-item-315,#menu-item-316{
			width:3vw;
}
		.global-nav-list>li .global-nav-name{
			font-size:1.2vw !important;
}
}

	@media (min-width: 920.98px)and (max-width: 1700px){
		.header_scrolled .site-header{
			padding-top:5vw !important;
}
}

/*---------------グローバルナビend---------------*/

/*---------------グーグルマップ　レスポンシブ対応---------------*/

		.gmap {
			height: 0;
			overflow: hidden;
			padding-bottom: 75%;
			position: relative;
}

		.gmap iframe {
			position: absolute;
	   		left: 0;
			top: 0;
			height: 100%;
			width: 100%;
}
/*---------------ハンバーガーメニュー---------------*/

	@media(max-width: 992px){
    /*スマホのハンバーガーメニュー画像変更*/
    	.vk-mobile-nav-menu-btn {
        	border: none;
        	/*background-image: url("/wp/wp-content/uploads/2025/03/hum_open.png");*/
        	/*background-size: cover;*/
        	background-color:rgb(255 255 255 / 0.8);
        	right:4vw !important;
        	top:6vh !important;
}
		
		.vk-mobile-nav-menu-btn.menu-open {
    		border: none;
    		/*background-image: url("/wp/wp-content/uploads/2025/03/hum_close.png");*/
    		/*background-size: cover;*/
    		background-color:rgb(255 255 255 / 0.8);
    		right:4vw !important;
    		top:2vh !important;
}
		
		.vk-mobile-nav-menu-btn,.vk-mobile-nav-menu-btn.menu-open {
    		right:4vw !important;
    		top:2vh !important;
}
}

/*---------------ハンバーガーメニュー　end---------------*/

/*---------------ハンバーガーメニューnew---------------*/

.vk-mobile-nav-menu-btn,.vk-mobile-nav-menu-btn.menu-open{
	background-image:none !important;
	border:none !important;
}
.vk-mobile-nav-menu-btn  {
  height: 44px;
  width: 44px;
  position: fixed;
  transform-origin: center;
  transition: .3s;

  &::after {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    background: #333;
    display: block;
    left: calc(50% - 4px);
    top: calc(50% - 4px);
    box-shadow: -12px 0 0 #591717,12px 0 0 #591717,-12px -12px 0 #591717,0 -12px 0 #591717,12px -12px 0 #591717,-12px 12px 0 #591717, 0 12px 0 #591717,12px 12px 0 #591717;
    
  }
  &::before {
    position: absolute;
    content: '';
    height: 20px;
    width: 3px;
    left: 21px;
    top: 12px;
    background: #fff;
  }
  &.is-active {
   background: #591717;
    border-radius: 22px;
    transform: rotate(45deg);
    
    &::after {
      box-shadow: none;
      width: 20px;
      height: 3px;
      left: 13px;
      top: 21px;
      background: #fff;
     }
  }
}
/*---------------ハンバーガーメニューnew　end---------------*/

/*---------------コンテンツ---------------*/
		.content_full{
			margin: 0 calc(50% - 50vw) !important;
}
/*---------------コンテンツ　end---------------*/

/*---------------インフォメーショングラフィックス---------------*/

			.explanation_right_box img{
            	width: 100%;
}

	        .explanation_right_box{
            	display: none;
}

        	.itsukiplan,.web_explan,.free_explan,.dtp_explan,.seo_explan,.consulting_explan,.blog_explan{
            	display: none;
}

        	.itsuki_btn{
            	cursor: pointer;
}

        	.info_graph_content{
            	width: 100vw;
            	display: block;
            	height: fit-content;
            	/*margin: 12vh auto;*/
            	text-align: center;
            	margin: 0 auto;
}

			.itsuki_graph_box{
            	width: auto;
}
      
        	.graph_container{
            	margin: 0 auto !important;
            	text-align: center;
}

        	 .graph_container .circle{
            	animation: rotate 35s infinite linear;
                margin: 18vh auto !important;/*グラフのpositionコントロール*/
				text-align: center;
            	display: flex;
            	justify-content: center;
				align-items:center;
            	width: calc(var(--r) * 2px); 
            	height: calc(var(--r) * 2px);
            	border: 20px solid #ddd;
            	border-radius: 50%;
            	box-sizing: border-box;
}
        
        	.graph_container .circle img{
            	width: 100%;
}

        	.graph_container .circle_height{
            	text-align: center;
            	display: flex;
            	align-items: center;
            	justify-content: center;
}

        	.innercircle{
            	display: block;
            	position: absolute;
            	text-align: center;
}
       
        	.graph_container .circle span,.innercircle{
            	animation: rotate2 35s infinite linear;
            	display: block;
            	position: absolute;
            	--a2: calc(var(--a) * 1deg - 90deg);
            	--x: calc(cos(var(--a2)) * var(--r) * 1px);
            	--y: calc(sin(var(--a2)) * var(--r) * 1px);
            	translate: var(--x) var(--y);
}
    
	       .explanation_right_box{
            	width: 48vw;
            	text-align: left;
            	padding-top: 5vh;
}
  
       		.explan_content h3{
            	border-bottom: solid 3px #a7a26b;
            	position: relative;
           	 	margin-bottom: 3vh;
            	font-weight: normal;
            	font-size: 24px;
}

        	.explan_content h3::after{
            	position: absolute;
            	content: "";
            	display: block;
            	border-bottom: solid 3px #35320e;
				bottom:-3px;
            	width: 30%;
}

        	.itsuki_img_box{
            	width: 20vw !important;
}

        	.itsuki_box{
            	display: flex;
            	margin: 0 auto;
}

	        .itsuki_read_box{
    	        width: 24vw;
        	    padding: 1vw;
}
			.top_caption{
				text-align:center;
				font-size:12px;
}

	@keyframes rotate {
          0% {
            transform: rotate(0deg);
}
          100% {
            transform: rotate(360deg);
}
}

	@keyframes rotate2 {
        0% {
            transform: rotate(0deg);
}
        100% {
            transform: rotate(-360deg);
}
}

	@media (min-width: 1700px){ 
     /*pc1 */
           :root{
            --r:290;
}
}

	@media (min-width: 1024px) {    
    .info_graph_content {
            /*overflow-y: scroll;*/
}
}

	@media (min-width: 1400px) and (max-width: 1699.99px) { 
     /*pc2 */
           :root{
            --r:250;
}

        .container .circle img{
            width: 15vw !important;
}
}

   
	@media(min-width: 769px) and (max-width: 1399.99px) {
		.info_graph_content{
            height: fit-content;
            text-align: center;
            margin: 0 auto;
            flex-wrap: wrap;
            justify-content: space-between;
}
        .itsuki_graph_box{
            box-sizing: border-box;
			margin:0 auto;
}



        .explanation_right_box{
            padding: 0.5vw;
			flex-wrap: wrap;
}

        .itsuki_img_box{
            width: 25vw !important;
}

   
        .explanation_right_box,.explan_content,.itsuki_box{
            width: 80vw !important;
            margin: 0 auto;
}  

        .itsuki_read_box{
            width: 52vw;
            padding: 1.5vw;
}
}       

	@media (min-width: 1324px) and (max-width: 1399.99px) { 
     /*pc3 */
           :root{
            --r:290;
}
}

	@media (min-width: 1100px) and (max-width: 1323.99px) { 
     /*pc4 */
           :root{
            --r:290;
}
		
        .graph_container .circle img{
            width: 20vw !important;
}
} 

        
	@media (min-width: 900px) and (max-width: 1099.99px){ 
      /* タブレット1 */
        :root{
            --r:290;
}
		

}
 
	@media (min-width: 768px) and (max-width: 899.99px){ 
     /* タブレット2*/
        :root{
            --r:250;
}
		

}

	@media (max-width: 768px){
        
        .itsuki_box{
            display: flex;
            margin: 0 auto;
            flex-direction: column;
}

        .explanation_right_box{
            width: 100vw !important;
            flex-wrap: wrap;
            margin: 0 auto;
}

        .explan_content h3{
            font-size: 5vw;
            width: 95vw;
            margin: 0 auto;
            
}

        .itsuki_box:nth-child(odd){
            flex-direction: column-reverse;
}

        .itsuki_img_box{
            width: 100vw !important;
            text-align: center;
            padding-top: 5vw;
                  
}

        .itsuki_img_box img{
            width: 80% !important;
                     
}

        .itsuki_read_box{
            width: 95vw;
            padding: 2.5vw;
}
}
	@media (min-width: 576px) and (max-width: 1024px){ 
        /* タブレット3*/
        .graph_container .circle img{
            width: 28vw !important;
}
		.graph_container .circle{
            	margin: 10vh auto !important;/*グラフのpositionコントロール*/
} 
}

	@media (min-width: 576px) and (max-width: 767.99px){ 
        /* タブレット3*/
        :root{
            --r:200;
}
}   
        
	@media (max-width: 575.99px){ 
        /* sp*/
        :root{
            --r:115;
}
		.graph_container .circle{
            	margin: 8vh auto !important;/*グラフのpositionコントロール*/
}
		
		.graph_container .circle img{
        	width: 36vw !important;
}

        .explanation_right_box{
            flex-direction: column;
}
}
		.vk_flow .vk_flow_frame_image{
			margin:0 auto;
}

	/*--------------parallax--------------*/

	@media (max-width: 575.98px) {
	/*スマホ*/
	.itsuki_cover{
		height: 530px;
		background-image: url(/wp/wp-content/uploads/2026/01/sp_parallax.jpg);
		background-position:center;
		position: relative;
		width: 100vw;
}
    
	.para_wrap{
		margin:0 calc(50% - 50vw);
}
   
	.text_wrap{
		width: 95vw;
		text-align: center;
		margin:0 auto;
		padding-top:40px;
}
	.cover_title{
        font-size: calc(36vw / 5.76);
    }

    .para_read , .para_name{
        font-size: calc(24vw / 5.76);
    }

    .para_yakusyoku{
        font-size: calc(20vw / 5.76);
    }
} 

	@media (min-width: 576px) and (max-width: 1024.98px){
	/*タブレット*/
	.itsuki_cover{
		height: 500px;
		background-image: url(/wp/wp-content/uploads/2026/01/tab_parallax.jpg);
		background-position:center;
		background-repeat: no-repeat;
		position: relative;
		width: 100vw;
}

	.para_wrap{
		margin:0 calc(50% - 50vw);
}
        
	.text_wrap{
		width: 95vw;
		text-align: center;
		margin:0 auto;
		padding-top:40px;
}

	.cover_title{
        font-size: calc(36vw /10.24);
		margin-bottom:0 !important;
    }

    .para_read , .para_name{
        font-size: calc(24vw / 10.24);
    }

    .para_yakusyoku{
        font-size: calc(20vw / 10.24);
    }


}
	@media (min-width: 1025px){
	/*pc*/
	.itsuki_cover{
		height: 600px;
		background-image: url(/wp/wp-content/uploads/2026/01/pc_parallax.jpg) ;
        background-position:center;
        background-repeat: no-repeat;
        position: relative;
        width: 100vw;
}
    
	.para_wrap{
		margin:0 calc(50% - 50vw);
		height:100%;
}
    
	.text_wrap{
		width: 65vw;
		text-align: center;
		margin:0 auto;
		padding-top:45px;
}
.cover_title{
        font-size: 36px;
    }

    .para_read , .para_name{
        font-size: 24px;
    }

    .para_yakusyoku{
        font-size: 20px;
    }

}
	.itsuki_cover{
    /*border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    margin-left: -100px;
    margin-right: -100px;
    padding-left: 100px;
    padding-right: 100px;*/

 }

	.cover_title{
		border-bottom:none;
        color: #fff;
}

.para_read {
    line-height: 2em;
    color: #fff;
	text-align:left;
}

	.cover_title::after{
		border-bottom:none;		
}

.para_name , .para_yakusyoku{
    display: block;
    text-align: right;

}
	/*--------------parallax_end--------------*/