/* ============================================================
  
  /pages/
  このディレクトリのCSSは「ページ特有の特有のスタイル」を
  記述してください。
  
  **our_philosophy.cssについて**
  本CSSはOur Philosophyページ専用CSSです。
  300行を超えるCSSとなる場合は分割を、分割を検討してください。
  
 our_philosophy.css 内ルール
  
  1. Dress機能、ブロックエディタの詳細CSSで制御できないスタイル、
     ページ個別の内容の内容のみ記述すること。
  2. CMS標準の機能で定義できないもののみ記述を可とする。
  3. **共通化できる内容の記述**は絶対にしないでください。
  
============================================================ */


/* 下部標準機能カルーセル調整用 */
.b-carousel_slide.seamless {
    /* 数字を大きくすると遅く、小さくすると速くなります */
    --duration: 320s !important;
    animation-duration: var(--duration) !important;
}

.a-billboard .site_frame{
	width:100%;
	max-width: 1200px;
	margin-top: auto;
    margin-bottom: 40px;
}
#a-billboard section{
	width: 675px;
}
#a-billboard svg{
	display: block;
}
#a-main .c-body{
	font-size: 17.5px;
  letter-spacing: 0.1em;
 	line-height: 2.8em;
 }
#a-main .-fadeIn{
	animation-duration: 3s;
}
#sub_title h2{
	font-size: 46px;
	letter-spacing: 0.2em;
}
#a-main .b-carousel .b-carousel_slide_wrap .column{
	min-width: fit-content !important;
}
#a-main .b-carousel .b-carousel_slide_wrap .column .c-body{
	width: max-content;
}
#bk98205356,#bk98210377,#bk98434179{
    max-width: 100%;
}
#bk98203318{
	max-width: 1525px;
}

#bk98434220{
	overflow: hidden;
	  right: 0;
  left: 0;
  margin: 0 auto;
  max-width: 1525px;
}
#trigger-image{
    position: absolute;
    height: 37vw;
    max-height: 567px;
    width: 100%;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
}
/* ===============================
基本設定：星ごとの線の長さとディレイ
=============================== */
:root {
	/* 星ごとの長短の線の長さ */
	--sp1-l: 47px;  --sp1-s: 34px;
	--sp2-l: 96px;  --sp2-s: 71px;
	--sp3-l: 136px; --sp3-s: 100px;

	/* アニメーション共通設定 */
	--sp-time: 3s linear both;

	/* 星ごとのアニメーション開始ディレイ */
	--sp1-delay: 0.5s;
	--sp2-delay: 1.8s;
	--sp3-delay: 2.0s;
}

/* ===============================
   星SVGの配置位置
   =============================== */
#sparkled1, #sparkled2, #sparkled3 {
	position: absolute;
	z-index: 99;
}
/*
#sparkled1 { top: 280px; left: 666px; }
#sparkled2 { top: -15px; left: 233px; }
#sparkled3 { top: -129px; left: 1086px; }
*/

	/* ===============================
	   星SVGの配置位置
	   =============================== */
	#sparkled1 {
		bottom: 2.6%; left: 43.4%;
		width: 8.7%;
		aspect-ratio: 1 / 1;
	}
	#sparkled2 {
		top: 26.3%; left: 15.3%;
		width: 18%;
		aspect-ratio: 1 / 1;
	}
	#sparkled3 {
		top: 0; left: 72.3%;
		width: 27%;
		aspect-ratio: 1 / 1;
	}
/* ===============================
   線の基本スタイル
   =============================== */
.sparkline {
	stroke-width: 1.5;
	stroke: #fff;
	stroke-dasharray: var(--len);
	stroke-dashoffset: var(--len);
}

/* ===============================
   星ごとの長短線とディレイ設定
   =============================== */

/* 星1 */
#sparkled1 .long  { --len: var(--sp1-l); --delay: var(--sp1-delay); }
#sparkled1 .short { --len: var(--sp1-s); --delay: var(--sp1-delay); }

/* 星2 */
#sparkled2 .long  { --len: var(--sp2-l); --delay: var(--sp2-delay); }
#sparkled2 .short { --len: var(--sp2-s); --delay: var(--sp2-delay); }

/* 星3 */
#sparkled3 .long  { --len: var(--sp3-l); --delay: var(--sp3-delay); }
#sparkled3 .short { --len: var(--sp3-s); --delay: var(--sp3-delay); }

/* ===============================
   共通アニメーション適用
   =============================== */
.animate .sparkline {
	animation: sparkle var(--sp-time);
	animation-delay: var(--delay, 0s);
}

/* ===============================
   共通アニメーション定義
   =============================== */
@keyframes sparkle {
	0% {
		stroke-dashoffset: var(--len);
		opacity: 1;
	}
	5%, 20% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: -10;
		opacity: 0;
	}
}

#bk98218717 .g-column{
	align-items: flex-end;
}

#Nature_and_Community_btn a{
	border: solid 1px #000000;
    margin: 0 auto;
    padding-left: 80px;
    padding-top: 25px;
    padding-bottom: 15px;
    display: block;
    max-width: 570px;
    line-height: 1.8em;
    font-weight: 600;
}
svg#Nature_and_Community {
    width: 400px;
}
svg#arrow{
	width: 18px;
}

/* スライド */
*{
	--swiper-navigation-size: 22px;
}
#bk98220402 .column{
	position: relative;
}
#a-main .swiper-slide{
	display: flex;
}
#a-main .swiper-slide .c-none{
	width: 50%;
	padding-right: 0;
	flex-shrink: 0;
}
#a-main .swiper-slide .modal__slide_text{
	width: auto;
	padding-left: 0;
	display: flex;
    flex-direction: column;
    background-color: #000000;
    color:#ffffff;
    padding: 40px 85px 40px 55px;
}
#a-main .swiper-slide .modal__slide_text h3{
	margin-bottom: 10px;
	letter-spacing: 0.36em;
	font-size: 20px;
}
#a-main .swiper-slide .modal__slide_text .c-right{
	margin-bottom: 0;
    margin-top: auto;
}
#a-main .swiper-slide .modal__slide_text .c-body{
	font-size: 16px;
	line-height: 1.8em;
	letter-spacing: 0.4px;
	text-align: justify;
	text-justify: inter-ideograph;
}
#a-main .swiper-slide .modal__slide_text .c-right a.btn-default{
    margin-bottom: 0;
}
#a-main .swiper-button-next, .swiper-button-prev {
    color: #000000;
    border-radius: 50%;
    width: 45px;
    height: 45px;
}
#a-main .swiper-button-next{
	right: 10px;
    left: auto;
}
#a-main .swiper-button-prev{
	left: 10px;
    right: auto;
}
#a-main .swiper-button-next:after,.swiper-button-prev:after{
	background-image: url(../../../_userdata/icon/slide_arrow.svg);
	width: 45px;
    height: 45px;
    right: 0;
    left: 0;
    transform: none;
}
#a-main .swiper-button-prev:after{
	transform: rotate(180deg);
	content: '';
}
#a-main .swiper-pagination{
	display: none;
}


@media screen and (max-width: 1200px){
	/* スライド */
	#a-main .swiper-slide{
		flex-direction: column;
		height: auto;
	}
	#a-main .swiper-slide .c-none,
	#a-main .swiper-slide .modal__slide_text{
		width: 100%;
		max-width: 600px;
		margin: 0 auto;
	}
}

@media screen and (max-width: 640px){
	.a-billboard .site_frame{
	    margin-bottom: 5px;
	}
	.a-billboard .site_frame .c-body{
	    line-height: 0;
	}
	.a-billboard .site_frame .c-body{
	    line-height: 0;
	}
	#a-billboard section{
	width: 100%;
	}

	#a-main h2{
		font-size: 1.5em;
    	letter-spacing: 0.09em;
	}
	
	#a-main .c-body{
	  line-height: 1.8em;
		letter-spacing: 0em;
		font-size: 16px;
		text-align: justify;
	}

	#bk98203318.b-plain>.column,
	#bk98210377.b-plain>.column{
		padding: 0;
	}
	#bk98218717 .c-right{
		position: relative;
	}
	#a-main .b-carousel .b-carousel_slide_wrap .column .c-body{
		width: auto;
	}
	#a-main .b-carousel .b-carousel_slide_wrap .c-img{
		/*height: 275px;
    	display: flex;*/
	}
	#a-main .b-carousel .b-carousel_slide_wrap .c-img picture{
		/*display: inline-flex;*/
		display: block;
	}
	#a-main .b-carousel .b-carousel_slide_wrap .c-img img,
	#a-main .b-carousel .b-carousel_slide_wrap .c-img source{
		/*object-fit: cover;*/
        height: 275px;
        width: auto;
	}
	
	#Nature_and_Community_btn a{
	    padding-left: 5%;
	    padding-right: 5%;
	}
	svg#Nature_and_Community {
	    width: 100%;
	}
	
	#natureandcommunity_toptxt .-col_sub{
		margin-bottom: 20px;
	}
	
	/* ボタン位置 */
	#bk98202356 .c-body,#bk98210648 .c-body{
		text-align: center;
	}
	/* スライド */
	#a-main .swiper-slide{
		flex-direction: column;
		height: auto;
	}
	#a-main .swiper-slide .c-none{
		width: 100%;
	}
	#a-main .swiper-slide .modal__slide_text{
		padding: 30px;
		height: 100%;
	}
	#a-main .swiper-slide .modal__slide_text h3{
		font-size: 16px;
	}
	#a-main .swiper-slide .modal__slide_text .c-body{
		font-size: 14px;
	}
	#a-main .swiper-pagination{
		display: block;
		position: relative;
    	margin-top: 10px;
	}
	#a-main .swiper-pagination-bullet-active{
		background-color: #000000;
	}
	#a-main .swiper-button-next, .swiper-button-prev {
		display:none;
	}
	
	#touji_img{
		overflow: hidden;
	}
	
	#touji_img .c-img{
		margin-left: -19%;
	    min-width: 600px;
	    display: block;
	}
	/* ===============================
	   星SVGの配置位置
	   =============================== */
	#sparkled1 {
		top: 64.6%; left: 38.6%;
		width: 11vw; height: 11vw;
	}
	#sparkled2 {
		top: -3.5%; left: 3%;
		width: 22.5vw; height: 22.5vw;
	}
	#sparkled3 {
		top: -29.8%; left: 73%;
		width: 32vw; height: 32vw;
	}

}