/*
Theme Name: vs_original
Theme URI: https://underscores.me/
Author: Automattic
Author URI: https://automattic.com/
Description: これは固定ページ専用のCSSファイルです。
Version: 1.0.0
*/
/*-------------------------------
	共通：トップ
-------------------------------*/
/*  コンテンツ余白 */
.topRecommend,
.topVoice,
.topNews,
.topService{
        margin: 0 0 170px;
}
.topNews,
.topAccess,
.topColumn{
        padding: 0 20px;
}
/* タイトル余白 */
.topVoice .tileTtl,
.topNews .tileTtl,
.topAccess .tileTtl,
.topColumn .tileTtl {
        padding: 0 0 50px;
}
/* ボタン上部余白 */
.recommendBlock .orangeBtn,
.topVoice .orangeBtn {
        margin: 50px auto 0;
}
.topNews .orangeBtn {
		margin: 50px 0 0 auto;
}
@media screen and (max-width: 780px) {
.topRecommend, .topVoice, .topNews, .topService {
  		margin: 0 0 120px;
}
.topVoice .tileTtl,
.topNews .tileTtl,
.topAccess .tileTtl,
.topColumn .tileTtl {
        padding: 0 0 30px;
}
}
/*-------------------------------
	トップ：メインスライド
-------------------------------*/
.topSlide .swiper-wrapper {
		  	width: 100%;
        	height: calc(100vh - 90px);
	 	 	position: relative;
}
.topSlide .logoBox {
  	position: absolute;
  	margin: auto 0;
	top: 10px;
    left: 20px;
	z-index: 2;
  	height: fit-content;
}
.topSlide .logoBox svg {
	width: 220px;
    height: auto;
}
.topSlide .methodLogo {
		position: absolute;
		right: 20px;
		bottom: 100px;
		width: 110px;
		z-index: 20;
}
.topSlide .eyewelleness {
        position: absolute;
		bottom: 10%;
		left: 2%;
        color: var(--thcolor-02);
        z-index: 10;
}
.topSlide .eyewelleness .eigo {
		font-size: 125px;
		font-family: var(--ffamiliy-01);
		font-weight: 200;
		opacity: 0.6;
}
.topSlide a:hover {
		opacity: 0.6;
}
/*
.topSlide .eyewelleness .kana {
		font-size: 22px;
		display: block;
		text-align: center;
		margin-top: -20px;
}
.topSlide .eyewelleness::before,
.topSlide .eyewelleness::after {
        content: '';
        position: absolute;
		width: 51px;
		height: 60px;
		z-index: -1;
}
.topSlide .eyewelleness::before {
        background: url(/wp-content/uploads/2023/11/img_decoration02.png);
		left: -30px;
		top: 0;
        background-repeat: no-repeat;
        background-size: contain;
}
.topSlide .eyewelleness::after {
        background: url(/wp-content/uploads/2023/11/img_decoration02-1.png);
		right: -30px;
  		bottom: 7px;
	   	background-repeat: no-repeat;
        background-size: contain;
}
*/
/*
.topSlide .logoBox p {
	line-height: 0;
}
*/
.topSlide .swiperImg {
        background-size: cover;
		width: 100%;
        height: 100%;
}
.topSlide .swiper-slide-active .swiperImg,
.topSlide .swiper-slide-duplicate-active .swiperImg,
.topSlide .swiper-slide-prev .swiperImg {
		animation: zoomOut 10s linear 0s 1 normal both;
}
@keyframes zoomOut {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@media screen and (max-width: 1230px){
.topSlide .logoBox {
		display: none;	
}
}
@media screen and (max-width: 980px) {
.topSlide .methodLogo {
		right: 5px;
		bottom: 44px;
		width: 90px;
}
.topSlide .eyewelleness .eigo {
        font-size: 50px;
}	
.topSlide .eyewelleness .kana {
        font-size: 18px;
		margin-top: -13px;
}
}
@media screen and (max-width: 580px) {
.topSlide .eyewelleness .eigo {
        font-size: 45px;
}	
.topSlide .eyewelleness .kana {
		font-size: 16px;
}
/*
.topSlide .eyewelleness::before,
.topSlide .eyewelleness::after {
		width: 37px;
		height: 35px;
}
*/
}
/*-------------------------------
	トップ：メッセージ	
-------------------------------*/
/* メッセージ */
.topCatch {
        padding: 70px 20px 150px;
		overflow-x: hidden;
}
.topGrid .gridBlock {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: space-between;
        align-items: center;
}
.catchArea .catch {
        font-size: 37px;
        font-weight: 700;
        padding: 0 0 40px;
        line-height: 2;
}
.topCatch .wrap {
        padding: 0 0 0 10px;
}
.catchArea .message {
        display: grid;
        gap: 20px;
        padding: 0 0 60px;
}
.catchArea .message p {
        font-size: 18px;
        line-height: 2.5;
}
.topCatch .img {
	   background-size: cover;
        position: relative;
        background-repeat: no-repeat;
        margin: 0 0 0 auto;
        background-position: 39%;
        left: -50px;
		max-width: 540px;
		aspect-ratio: 10 / 12;
}
.topCatch .img::before,
.topCatch .img::after {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
}
.topCatch .img::before {
        width: 150px;
        height: 200px;
        bottom: 20px;
        right: -45px;
        background: #F5D6D69C;
}
.topCatch .img::after {
        width: 120px;
        height: 130px;
        bottom: -35px;
        right: -20px;
        background: #F2B3373D;
}
.topCatch .orangeBtn:first-of-type {
        margin: 0 0 20px;
}
@media screen and (max-width: 1180px) {
.catchArea .catch {
        font-size: 30px;
}
.topCatch .img {
		max-width: 390px;
}
}
@media screen and (max-width: 980px) {
.catchArea .gridBlock {
        grid-template-columns: 1fr;
		gap: 45px 0;
}
.topCatch .wrap {
        padding: 0;
}
.catchArea .catch {
        font-size: 25px;
        padding: 0 0 40px;
        line-height: 2;
}
.topGrid .message {
		padding: 0 0 40px;
}
.catchArea .message p {
		font-size: 16.5px;
}
.topCatch .img {
		max-width: 420px;
		aspect-ratio: 11 / 11;
}
.topCatch .img::before,
.topCatch .img::after {
		right: unset;	
}
.topCatch .img::before {
		left: -45px;	
}
.topCatch .img::after {
		left: -20px;	
}
}
@media screen and (max-width: 570px) {
.topPickup {
	    padding: 0 0 90px 20px;	
}
.topCatch .img {
		left: 50px;	
		aspect-ratio: 10 / 12;
}	
}
/* サービス */
.topService {
        padding: 0 20px;
}
.topService .img {
        background-size: cover;
        position: relative;
        aspect-ratio: 1 / 1;
        background-repeat: no-repeat;
        max-width: 580px;
        margin: 0 auto;
        background-position: center;		
}
.topService .img::before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        width: 100px;
        height: 300px;
        bottom: -20px;
        left: -36px;
        background: #F5D6D69C;
}
.topService .tileTtl {
		padding: 0 0 30px;
}
.topService .txtBox {
		place-self: center;
}
@media screen and (max-width: 980px) {
.topService .img::before {
		bottom: -20px;
		left: -20px;
		height: 220px;
}
.topService .imgBox {
		padding: 20px;
}
.topService .tileTtl {
		padding: 0 0 20px;
}
}
/*-------------------------------
	共通：こんなお悩み…
-------------------------------*/
.recommendBlock {
		padding: 70px 20px;
		background: var(--bgcolor-05);
}
.recommendBlock .recBtn {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 15px;
}
.recommendBlock .recBtn img {
        aspect-ratio: 16 / 11;
}
@media screen and (max-width: 1180px) {
.recommendBlock .recBtn {
        grid-template-columns: 1fr 1fr;
}
}
@media screen and (max-width: 780px) {
.recommendBlock {
		padding: 40px 20px;
}
.recommendBlock .recBtn {
        grid-template-columns: 1fr;
}      
}
/*-------------------------------
	トップ：視力回復体験談
-------------------------------*/
.topVoice .tileTtl .wrap {
		margin: auto;
}
/*-------------------------------
	トップ：ひとみの学習部屋
-------------------------------*/
.topColumn {
		margin: 0 0 120px;
}
.topColumn a {
		max-width: 560px;
		margin: auto;
}
/*-------------------------------
	【トップ】キャンペーン
-------------------------------*/
.topPickup {
        padding: 0 0 150px 20px;
        width: 100%;
}
.topPickup .tileTtl {
        max-width: var(--contwide-01);
        width: 100%;
        margin: 0 auto;
        padding: 0 0 70px;
}
.topPickup .swiper {
        width: 100%;
        margin: 0 0 0 auto;
        max-width: calc(50% + 605px);
}
.topPickup .swiper-slide img {
		aspect-ratio: 16 / 10;
  		width: 100%;
  		object-fit: cover;
  		border: solid #fff 4px;
  		border-radius: 10px;
} 
.topPickup .slidWrap {
        position: relative;
        padding: 0 0 45px;
}
.topPickup .slidWrap::before {
        content: '';
        background: var(--bgcolor-05);
        width: 100%;
        height: 0;
        padding-top: 18%;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: -1;
        border-radius: 10px 0 0 10px;
}
.topPickup .flexBox {
        display: flex;
        justify-content: space-between;
        padding: 50px 30px 0;
        align-items: center;
        margin: 0 0 0 auto;
} 
.topPickup .swipBtn {
        display: flex;
        gap: 0 45px;
}
.topPickup .swiper-button-prev,
.topPickup .swiper-button-next {
        display: grid;
        place-content: center;
        width: 70px;
        height: 70px;
        border-radius: 50px;
        background: var(--thcolor-02);
        position: relative;
        transition: all 0.3s;
        cursor: pointer;
}
.topPickup .swipBtn *::before,
.topPickup .swipBtn *::after { 
        display: none; 
}
.topPickup .swiper-button-disabled {
        background: var(--bgcolor-03);
}
.topPickup .swipBtn .swiper-button-prev {
        transform: scale(-1, 1);
}
.topPickup .swiper-scrollbar {
        position: unset;
}
.topPickup svg {
        width: 30px;
}
.topPickup .swiper-scrollbar,
.topPickup .swiper-scrollbar-drag { 
        width: 100%;
        height: 12px;
        border-radius: 50px;
}
.topPickup .swiper-scrollbar {
        max-width: 900px;
        background: var(--bgcolor-02);
}
.topPickup .swiper-scrollbar-drag {
        background: var(--thcolor-02);
        cursor: pointer;
}
@media screen and (max-width: 1230px) {
.topPickup .swiper {
		max-width: calc(50% + 530px);
}
}
@media screen and (max-width: 1120px) {
.topPickup .swiper {
		max-width: calc(50% + 380px);
}
}
@media screen and (max-width: 910px) {
.topPickup .swiper {
		max-width: calc(50% + 280px);
}
.topPickup .slidWrap::before {
		padding-top: 26%;
}
.topPickup .flexBox {
		padding: 30px 20px 0 10px;
}
.topPickup .swipBtn {
		gap: 0 35px;	
}
.topPickup .swiper-button-prev,
.topPickup .swiper-button-next {
		width: 50px;
  		height: 50px;
}
.topPickup svg {
		width: 20px;
}
}
@media screen and (max-width: 680px) {
.topPickup {
        padding: 0 0 100px 20px;	
}
.topPickup .tileTtl {
		padding: 0 0 30px;	
}
.topPickup .swiper {
		max-width: calc(50% + 160px);
}	
}
@media screen and (max-width: 580px) {
.topPickup .slidWrap::before {
        padding-top: 40%;
}	
}
/*-------------------------------
	共通：お知らせ
-------------------------------*/
.newsBlock a {
        display: grid;
        grid-template-columns: 1.5fr 2fr 7fr;
        font-size: 20px;
        border-bottom: solid 2px var(--bgcolor-05);
        padding: 25px 20px;
        gap: 10px;
}
.newsBlock .contTtl,
.newsBlock .postTime {
        transition: all 0.3s;
}
.newsBlock a:hover .contTtl,
.newsBlock a:hover .postTime {
        color: var(--thcolor-02);
}
.newsBlock .contTtl {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
}
.newsBlock .grayBox {
        width: fit-content;
        font-size: 18px;
        padding: 0 5px;
}
@media screen and (max-width: 970px) {
.newsBlock a {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:    "areaA areaB" 
                                "areaC areaC";
		gap: 20px;
}
.newsBlock .postTime {
        grid-area: areaA;
}
.newsBlock .grayBox {
        grid-area: areaB;
        justify-self: end;
}
.newsBlock .contTtl {
        grid-area: areaC;
}     
}
@media screen and (max-width: 780px) {
.newsBlock a { 
	font-size: 16.5px; 
	padding: 20px 10px;	
}
.newsBlock .grayBox { font-size: 16px; }
}
/*-------------------------------
	共通：アクセス
-------------------------------*/
.topAccess .tileTtl .wrap {
		margin: auto;
}
.accessBox .infoBox {
        display: grid;
	font-style: initial;
}
.accessBox .infoBox > div:not(address> div:first-of-type) {
        border-top: solid 1px var(--bgcolor-03);
}
.accessBox .mapBox {
        aspect-ratio: 16 / 10;
        max-width: 620px;
  		width: 100%;
}
.gm-style .place-card-large {
	display: none;
}
.accessBox .mapBox iframe {
        width: 100%;
        height: 100%;
}
.accessBox .openBlock {
	flex-basis: 65%;
}
.accessBox .infoBox .flexBox {
	display: flex;
	justify-content: space-between;
        align-items: last baseline;
}
.accessBox .openBox {
        display: grid;
        gap: 5px;
}
.accessBox .openFlex {
        display: flex;
        gap: 0 5px;
	align-items: baseline;
	font-size: 17px;
}
.accessBox .openFlex:first-of-type {
        padding: 0 0 10px;
}
.accessBox .openFlex .grayBox {
        max-width: 85px;
        padding: 3px 0;
		font-size: 16px;
}
.accessBox .moreBox	{
        display: grid;
        gap: 20px;
}
.accessBox .boxTtl {
	padding: 0 0 10px;
}
/* 共通の余白 */
.accessBox .infoBox .flexBox {
		padding: 20px 0;
}
.accessBox .moreBox {
		padding: 20px 0 0;
}
/*-------------------------------
	【トップ】アクセス
-------------------------------*/
.topAccess .tileTtl {
		text-align: center;
}
.topAccess .innerBlock {
		display: grid;
  		grid-template-columns: 1fr 1fr;
		gap: 65px;
}
.topAccess .accessBox .moreBox {
		display: none;
}
@media screen and (max-width: 1080px) {
.topAccess .innerBlock {
		gap: 30px;
}
}
@media screen and (max-width: 970px) {
.topAccess .innerBlock {
		grid-template-columns: 1fr;
		gap: 60px;
}	
}
/*-------------------------------
	【下層】アクセス
-------------------------------*/
.accessArea {
		padding: 0 20px;
}
.accessArea .innerBlock {
		display: grid;
		gap: 150px 0;
}
.accessArea .gridBox {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 40px 20px;
}
.accessArea .orangeTtl {
       text-align: center;
}
.accessArea .mapBox {
        order: 1;
		justify-self: end;
}
.accessArea .accessBtn {
		display: none;
}
@media screen and (max-width: 1230px) {
.accessBox .infoBox .flexBox {
		flex-direction: column;
		gap: 15px;
    	padding: 20px 0 30px;
		align-items: baseline;
}
.accessBox .openBlock {
  		flex-basis: 65%;
  		width: 100%;
}
}
@media screen and (max-width: 870px) {
.accessArea .gridBox {
		grid-template-columns: 100%;
		gap: 0;
}
.accessArea .mapBox {
  		order: 0;
		justify-self: center;
}
.accessArea .innerBlock {
		gap: 100px 0;
}
.accessBox .infoBox .flexBox {
		padding: 5px 0 20px;
}
.accessBox .openBox {
        gap: 0;
}
.accessBox .openFlex {
		font-size: 16px;
}
.accessBox .openFlex .grayBox {
		font-size: 15px;
}
}
@media screen and (max-width: 870px) {
.accessBox .infoBox {
		font-size: 16.5px;	
}
}
/*-------------------------------
	プライバシーポリシー
-------------------------------*/
.privacyArea {
        padding: 0 20px;
}
.privacyArea .innerWide {
        display: grid;
        gap: 90px;
}
.privacyArea .innerBox {
        line-height: 2.5;
}
.privacyArea ol {
		display: grid;
		gap: 30px;
}
.privacyArea ol > li {
        counter-increment: cnt;
}
.privacyArea ol > li::before {
		content: "(" counter(cnt) ") ";
}
.privacyArea ul {
		margin: 10px 0px 10px 20px;
}
.privacyArea ul li {
        list-style: circle;
}
.privacyArea .orangeTtl{
		text-align: center;
}
@media screen and (max-width: 768px) {
.privacyArea .innerBox {
		font-size: 16.5px;	
}
.privacyArea ul {
 		margin: 10px 0px 10px 15px;
}
}
/*-------------------------------
	特定商取引法に基づく表記
-------------------------------*/
.lawArea {
        padding: 0 20px;
}
.lawArea .innerBlock {
        display: grid;
        grid-template-columns: 1fr 4fr;
}
.lawArea dt { font-weight: 600; }
.lawArea dt,
.lawArea dd {
        padding: 40px 0 40px 15px;
        border-bottom: solid 1px var(--bgcolor-04);
}
.lawArea dd {
        line-height: 2;
}
@media screen and (max-width: 810px) {
.lawArea .innerBlock {
        grid-template-columns: 1fr;
}
.lawArea dt {
        border-bottom: none;
        padding: 40px 10px 25px;
}
.lawArea dd {
        padding: 0 10px 40px;
}
}
/*-------------------------------
	お問い合わせフォーム
-------------------------------*/
input[type="submit"] {
		font-family: var(--ffamiliy-01);
  		color: #fff;
  		font-weight: 600;
		font-size: 23px;
	  	max-width: 370px;
	  	display: block;
	  	width: 100%;
	  	padding: 20px;
	  	cursor: pointer;
	  	letter-spacing: 1px;
	  	margin: 70px auto 0;
		background: var(--thcolor-02);
  		border-radius: 5px;
		transition: all 0.3s;
		border: solid 2px var(--thcolor-02);
}
input[type="submit"]:hover {
  		color: var(--thcolor-02);
		background: #fff;
}
.contactArea {
        padding: 0 20px;
}
.contactArea .desc {
        padding: 0 0 45px;
        line-height: 2.5;
}
.contactArea .telBox {
        display: grid;
        gap: 20px;
        padding: 0 0 150px; 
}
.contactArea .orangeTtl {
        text-align: center;
}
.contactArea .gridBox {
        display: grid;
}
.contactArea .commonAsk,
.contactArea .visitorBox {
        gap: 40px;
}
.contactArea .askBox {
        gap: 0 150px;
}
.contactArea .commonAsk,
.contactArea .askBox,
.contactArea .visitorBox {
        padding: 0 0 150px;
}
.contactArea .ttl {
        padding: 0 0 10px;
        font-size: 20px;
        font-weight: 600;
        display: block;
}
.contactArea .rqr {
        background: var(--thcolor-02);
        color: var(--bgcolor-02);
        font-size: 15px;
        font-weight: 600;
        padding: 5px;
        margin: 0 0 0 10px;
        border-radius: 5px;
}
.contactArea input[type="date"] {
        cursor: pointer;
        margin: 0 0 10px;
}
.contactArea .etcBox {
        margin: 10px 0 0;
}
.contactArea label {
        cursor: pointer;
        padding: 20px;
        display: flex;
        border: solid 3px var(--bgcolor-05);
        border-radius: 5px;
        background: var(--bgcolor-02);
        align-items: center;
        gap: 15px;
        user-select: none;
}
.contactArea .wpcf7-list-item {
		display: block;
}
.contactArea [type="checkbox"], 
.contactArea [type="radio"] {
        width: 25px;
        height: 25px;
		flex-shrink: 0;
}
.contactArea .checkBox,
.contactArea .radioBtn {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
}
.contactArea .oneBox {
        grid-template-columns: 1fr;
}
.contactArea .privacyBlock {
        text-align: center;
}
.contactArea .privacyBlock a {
        padding: 20px 0;
        margin: 0 auto 45px;
        line-height: 2;
        border-radius: 5px;
        background: var(--bgcolor-05);
        max-width: 370px;
        text-decoration: underline;
}
.contactArea .privacyBlock a:hover {
        color: var(--thcolor-02);
}
.contactArea .privacyBlock label {
		width: fit-content;
  		margin: auto;
}
.contactArea .wpcf7-list-item {
        margin: 0;
}
.contactArea .wpcf7-form-control-wrap {
        display: block;
}
/* focus */
.contactArea .txtBox:focus-visible,
.contactArea .txtArea:focus-visible,
.contactArea input[type="date"]:focus-visible {
        outline: none;
        border: solid 3px var(--thcolor-02);
}
.contactArea .recaptchBox {
	  text-align: center;
	  padding: 20px 0 0;
}
.grecaptcha-badge { visibility: hidden; }
@media screen and (max-width: 768px) {
.contactArea .telBox {
	  padding: 0 0 85px;
}
.contactArea .ttl {
	font-size: 18px;	
}
.contactArea label { 
		padding: 20px 10px; 
}
.contactArea .privacyBlock label {
		width: 100%;		
}
.contactArea .checkBox,
.contactArea .radioBtn {
        grid-template-columns: 1fr;
        gap: 10px;
}
}
/*-------------------------------
	はじめての方へ
-------------------------------*/
.guestArea {
        padding: 0 0 100px;
}
.guestArea > div {
        padding: 85px 20px;
}
.guestArea .bageBlock {
        background: var(--bgcolor-05);
}
.guestArea .gridBox {
        display: grid;
        grid-template-columns: 1fr 1fr;
}
.guestArea .imgBox {
        max-width: 480px;
        width: 100%;
}
.guestArea .imgBox img {
        aspect-ratio: 10 / 9;
        width: 100%;
        object-fit: cover;
}
.guestArea .intro {
        font-size: 18px;
        line-height: 2.5;
        padding: 0 0 40px;
}
.guestArea .orangeTtl {
        padding: 0 0 30px;
}
.guestArea .gridBox > div:first-of-type {
        justify-self: flex-start;
}
.guestArea .gridBox > div:nth-of-type(2) {
        justify-self: flex-end;
}
.guestArea .txtBox {
        align-self: center;
}
@media screen and (max-width: 1080px) {
.guestArea .imgBox,
.guestArea .txtBox{
        max-width: 520px;
}
}
@media screen and (max-width: 890px) {
.guestArea .gridBox {
        grid-template-columns: 1fr;
        gap: 25px;
		width: fit-content;
}
.guestArea .gridBox > div:first-of-type,
.guestArea .gridBox > div:nth-of-type(2) {
        justify-self: baseline;;
        align-self: flex-start;
}
.guestArea .imgBox {
        order: 0;
}
.guestArea .txtBox {
        order: 1;
}
.guestArea .intro {
        font-size: 16.5px;
}
.guestArea .orangeTtl {
        padding: 0 0 25px;
        font-size: 23px;
}
}
/* サービスの流れ */
.serviceflowArea {
        padding: 0 20px 140px;
        width: 100%;
}
.serviceflowArea .orangeTtl {
        text-align: center;
}
.serviceflowArea .telBox {
        display: grid;
        gap: 20px;
}
.serviceflowArea .telFlex {
        padding: 0;
}
.serviceflowArea .info {
        display: grid;
        gap: 20px;
}
.serviceflowArea .info > p {
        line-height: 2;
}
.serviceflowArea small {
        font-size: 15.5px;
}
.serviceflowArea .dots::after {
        content: '';
        display: block;
        width: 5px;
        height: 45px;
        border-left: dotted 7px var(--bgcolor-03);
        margin: 5px 0 -15px 30px;
}
.serviceflowArea {
        padding: 0 20px 140px;
}
.serviceflowArea .orangeTtl {
        text-align: center;
}
.serviceflowArea .gridBox {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: space-between;
        gap: 30px;
}
.serviceflowArea .whiteBtn {
        border: solid 2px var(--bgcolor-05);
}
.serviceflowArea .whiteBtn img {
        aspect-ratio: 10 / 5;
}
.serviceflowArea .glasses {
        object-position: center top;
}
.serviceflowArea .training {
        object-position: center 25%;
}
.serviceflowArea .afterfollow {
        object-position: center 15%;
}
/* 会員サービス */
.membersArea {
        padding: 0 20px 140px;
}
.membersArea .orangeTtl {
        text-align: center;
}
.membersArea .gridBox {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: space-between;
        gap: 30px;
}
.membersArea .whiteBtn {
        border: solid 2px var(--bgcolor-05);
}
.membersArea .whiteBtn img {
        aspect-ratio: 10 / 5;
}
.membersArea .glasses {
        object-position: center top;
}
.membersArea .training {
        object-position: center 25%;
}
.membersArea .afterfollow {
        object-position: center 15%;
}
@media screen and (max-width: 890px) {
.membersArea .gridBox {
        grid-template-columns: 1fr;
		gap: 15px;
}
}
/* オンラインショップ開設！ */
.shopArea {
        padding: 100px 20px;
        position: relative;
}
.shopArea::after {
        content: 'New';
        color: var(--thcolor-02);
        font-size: 32px;
        display: grid;
        width: 90px;
        height: 90px;
        background: #EFC2B073;
        border-radius: 50px;
        position: absolute;
        top: 10px;
        left: 36%;
        place-content: center;
        font-family: var(--ffamiliy-01);
}
.shopArea .flexBox::before {
        content: '';
        background: var(--bgcolor-05);
        max-width: 970px;
        width: 100%;
        position: absolute;
        height: 80%;
        z-index: -1;
        margin: auto;
        inset: 0;
        border-radius: 5px;
}
.shopArea .orangeTtl {
        text-align: center;
}
.shopArea .flexBox {
        display: flex;
        justify-content: center;
        gap: 40px;
}
.shopArea .imgWrap {
        position: relative;
        width: 100%;
        flex-basis: 48%;
        padding: 140px 0px;
}
.shopArea .imgBox {
        width: 100%;
        border-radius: 5px;
        border: solid 2px var(--bgcolor-05);
        position: absolute;
        bottom: 0;
        background-size: cover;
        background-position: center;
}
.shopArea .goods01 {
	   	max-width: 320px;
        aspect-ratio: 9 / 6;
        z-index: 1; 
		right: 0;
}
.shopArea .goods02 {
	    max-width: 400px;
        z-index: 0;
        left: 0;
        aspect-ratio: 13 / 9;
}
.shopArea .txtBox {
        margin: 0 auto 0 0;
        align-self: center;
}
.shopArea .txtBox p {
        line-height: 2.5;
}
.shopArea .orangeBtn {
        margin: 20px 0 0 auto;
}
@media screen and (max-width: 1230px) {
.shopArea::after {
        width: 70px;
        height: 70px;
        font-size: 24px;
        left: 5%;
}
}
@media screen and (max-width: 1080px) {
.shopArea::after {
        width: 70px;
        height: 70px;
        font-size: 24px;
        left: 5%;
}
.shopArea .goods01 {
        max-width: 220px;
}
.shopArea .goods02 {
        max-width: 360px;
}
}
@media screen and (max-width: 890px) {
.shopArea {
        padding: 45px 20px;
}
.shopArea::after {
        top: -35px;
}
.shopArea .flexBox {
        flex-direction: column-reverse;
}
.shopArea .flexBox::before {
        width: 95%;
        height: 80%;
        z-index: -1;
        margin: 0 auto;
        inset: 0;
        border-radius: 5px;
}
.shopArea .imgWrap {
        padding: 95px 0px;
        margin: auto;
}
.shopArea .goods01 {
        max-width: 200px;
}
.shopArea .goods02 {
        max-width: 280px;
}
.shopArea .txtBox {
        margin: 0 auto;
}
.shopArea .txtBox p {
        font-size: 16.5px;
}
}
/*-------------------------------
	【共通】メインサービス
-------------------------------*/
.commonService {
        display: grid;
        gap: 170px;
}
.commonService .mainImg {
        width: 100%;
        background-size: cover;
        aspect-ratio: 3 / 1;
        margin: 0 auto 130px;
}
.commonService .wrap {
        padding: 0 20px;
}
.commonService .txtBox {
        display: grid;
        gap: 20px;
        padding: 0 0 120px;
}
.commonService .txtBox p {
        line-height: 2.5;
}
.commonService .intro .orangeBtn {
        margin: 0 0 0 auto;
}
.commonService .gridBox {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
}
/* stepBox */
.commonService .stepBox {
        display: grid;
        gap: 100px;
}
.commonService .memoBox {
        display: grid;
        gap: 40px;
        grid-template-columns: 1fr 1fr;
}
.commonService .memoBox p {
        line-height: 2.5;
}
.commonService .stepBox .bageBox {
        padding: 40px 50px 50px;
        position: relative;
}
.commonService .stepBox .bageBox::after {
        color: var(--thcolor-02);
        font-size: 80px;
        font-weight: 500;
        position: absolute;
        left: -40px;
        top: -65px;
        opacity: 0.4;
}
.commonService .stepBox .bageBox:first-of-type::after { content: '01'; }
.commonService .stepBox .bageBox:nth-of-type(2)::after { content: '02'; }
.commonService .stepBox .bageBox:nth-of-type(3)::after { content: '03'; }
.commonService .stepBox .bageBox:nth-of-type(4)::after { content: '04'; }
.commonService .stepBox .bageBox:nth-of-type(5)::after { content: '05'; }
.commonService .stepBox .bageBox:nth-of-type(6)::after { content: '06'; }
.commonService .stepBox .bageBox:nth-of-type(7)::after { content: '07'; }
.commonService .stepBox .bageBox:nth-of-type(8)::after { content: '08'; }
.commonService .stepBox .bageBox:nth-of-type(9)::after { content: '09'; }
.commonService .stepBox .bageBox:nth-of-type(10)::after { content: '10'; }

.commonService .stepBox .imgBox {
        max-width: 450px;
        background-size: cover;
        width: 100%;
        aspect-ratio: 11 / 7;
        position: absolute;
        right: 50px;
        border-radius: 10px;
        border: solid 4px var(--bgcolor-02);
        top: -12%;
}
/* 2個グリッド */
.commonService .effect {
        display: grid;
        gap: 120px;
}
.commonService .effect .gridBox {
        gap: 40px;
}
.commonService .effect .imgBox {
        background-size: cover;
        width: 100%;
        aspect-ratio: 3 / 2;
        background-position: center;
}
.commonService .boxList {
        display: grid;
        line-height: 2;
}
.commonService .effect .listBox {
        display: grid;
        gap: 10px;
}
.commonService .effect .bageBox {
        padding: 5px 20px 20px;
}
@media screen and (max-width: 1180px) {
.commonService .stepBox .forPc {
		display: none;		
}
.commonService .stepBox .bageBox {
        padding: 30px 25px 40px;
		max-width: 960px;
    	margin: auto;
}
.commonService .stepBox .bageBox::after {
        left: 10px;
        top: -55px;
        font-size: 60px;
}
.commonService .stepBox .imgBox {
        max-width: 350px;
        right: 25px;
}
}
@media screen and (max-width: 910px) {
.commonService .txtBox {
	    padding: 0 0 80px;
}
.commonService .stepBox .imgBox {
        position: initial;
        justify-self: end;
        align-self: baseline;
		padding-top: 65%;
}
.commonService .stepBox .bageBox {
        padding: 30px 15px 40px;
}
}
@media screen and (max-width: 780px) {
.commonService .effect {
		gap: 70px;	
}
.commonService .stepBox .memoBox {
        grid-template-columns: 100%;
        gap: 15px;
		font-size: 16.5px;
}
.commonService .stepBox {
		gap: 70px;		
}
}
@media screen and (max-width: 580px) {
.commonService .stepBox .imgBox {
        justify-self: center;
}
.commonService .effect .gridBox {
		gap: 20px;
	    font-size: 16.5px;
}
}
/* ご利用にあたって */
.howtoUse {
        padding: 0 20px;
        display: grid;
        gap: 120px;
}
.howtoUse .orangeTtl {
        text-align: center;
        padding: 0 0 70px;
}
.howtoUse .gridBox {
        gap: 40px;
}
.howtoUse .bageBox {
        margin: 0 0 10px;
}
.howtoUse .bageBox ul {
        display: grid;
        gap: 15px;
		line-height: 2;
}
.howtoUse .bageBox .orangeBtn {
        margin: 15px 0 0 auto;
}
.howtoUse table {
        border-collapse: collapse;
        border-spacing: 0;
}
.howtoUse table th {
        font-size: 20px;
        font-weight: 500;
}
.howtoUse table .first {
        padding: 10px 5px;
        width: 38%;
}
.howtoUse table td {
        padding: 10px 0;
}
.howtoUse table td::after {
        display: grid;
        place-content: center;
        font-size: 1.8rem;
}
.howtoUse table .open::after {
        content: '●';
        color: var(--thcolor-02);
}
.howtoUse table .open.gray::after {
        color: var(--bgcolor-03);	
}
.howtoUse table .close::after {
        content: '－';
}
.howtoUse table th, 
.howtoUse table td {
        border-bottom: solid 1px var(--bgcolor-03);
}
.howtoUse .contactBox  {
         display: grid;
         gap: 30px;
         padding: 0 20px;
}
.howtoUse .storesBox {
        display: flex;
        justify-content: space-between;
        align-items: end;
        flex-wrap: wrap;
        gap: 20px;
}
.howtoUse .bnrBtn {
        max-width: 220px
}
.howtoUse .bnrBtn img{
        object-fit: contain;
        width: 100%;
        transition: all 0.3s;
}
.howtoUse .bnrBtn:hover {
        opacity: 0.7;
}
.howtoUse .bageBlock {
	  display: grid;
	  gap: 20px;
	  padding: 0 0 100px;
}
@media screen and (max-width: 1080px) {
.howtoUse table th {
        font-size: 16px;
}
.howtoUse table td::after {
        font-size: 1.5rem;
}
.howtoUse .storesBox {
        flex-direction: column;
        align-items: baseline;
}
.howtoUse .storesBox div {
	    font-size: 16.5px;
    	line-height: 2;		
}
}
@media screen and (max-width: 970px) {
.commonService .mainImg {
        aspect-ratio: 3 / 2;
        margin: 0 auto 70px;
}
.commonService .gridBox {
        grid-template-columns: 1fr;
		gap: 0;
}
.howtoUse .contactBox {
        padding: 0 5px;
}
.howtoUse .bageBox ul {
		gap: 10px;	
}
}
@media screen and (max-width: 768px) {
.commonService {
		gap: 90px;	
}
.commonService .effect .bageBox {
    	padding: 15px 10px 20px;
}
.commonService .txtBox p {
    font-size: 16.5px;
}
.howtoUse {
		gap: 90px;
}
.howtoUse .bageBox {
    padding: 20px 15px 30px;
}
.howtoUse .contactBox {
		gap: 20px;	
}
.howtoUse .orangeTtl {
		padding: 0 0 40px;	
}
.howtoUse table .first {
		width: 24%;	
}
}
/*-------------------------------
	【下層】カウンセリング
-------------------------------*/
.couselingInfo .recommendBlock {
        margin: 0 0 100px;
        position: relative;
}
.couselingInfo .recommendBlock::after {
        content: '';
        position: absolute;
        display: block;
        background: var(--bgcolor-05);
        width: 113px;
        height: 110px;
        transform: rotate(45deg);
        z-index: -1;
        margin: 0 auto;
        left: 0;
        right: 0;
        bottom: -50px;
}
.solveBlock .orangeTtl {
        text-align: center;
        padding: 50px 0 90px;
}
.couselingInfo .wrap {
        display: grid;
        gap: 120px;
}
.couselingInfo .bnrBtn {
		max-width: 680px;
		margin: auto;
}
.couselingInfo .bnrBtn:hover {
		opacity: 0.7;
}
@media screen and (max-width: 780px) {
.solveBlock .orangeTtl {
		padding: 10px 0 65px;	
}
}
/*-------------------------------
	【下層】トレーニング
-------------------------------*/
/*-------------------------------
	【下層】メガネセラピー
-------------------------------*/
.glassesInfo .effect .listBox {
        gap: 20px 0;
}
.glassesInfo .flowBlock {
        padding: 210px 0 0;
}
.glassesInfo .stepBox {
        padding: 80px 0 0;
}
.glassesInfo .memo {
        padding: 0 0 30px;
}
.glassesInfo .innerBox .orangeTtl {
        text-align: center;
}
.glassesInfo.systemArea {
        display: grid;
        gap: 120px 0;
}
@media screen and (max-width: 1080px) {
.glassesInfo .flowBlock {
    	padding: 110px 0 0;
}
.glassesInfo .stepBox {
    	padding: 65px 0 0;
}
}
@media screen and (max-width: 780px) {
.glassesInfo .miekataBox .whiteBtn:nth-of-type(3) {
        margin: 0 0 30px;
}
.glassesInfo .stepBox {
    	padding: 35px 0 0;
}
}
/*-------------------------------
	【下層】こんな方におすすめ
-------------------------------*/
.commonService .systemArea .etc {
        align-self: end;
}
.recommendInfo {
        width: 100%;
        padding: 0 20px;
        display: grid;
        gap: 120px 0;
}
.recommendInfo .txtBox,
.recommendInfo .systemArea {
        padding: 0;
}
.recommendInfo .stepBox {
        padding: 50px 0 0;
}
@media screen and (max-width: 780px) {
.recommendInfo {
		gap: 80px 0;
}
.recommendInfo .txtBox {
    	font-size: 16.5px;
}
.recommendInfo .stepBox {
		padding: 30px 0 0;
		gap: 65px;
}
}
@media screen and (max-width: 362px) {
.workerArea .bageBox:nth-of-type(2) .minTtl > .forSp {
		display: none;		
}
}
/*-------------------------------
	【下層】会員制度のご案内
-------------------------------*/
.systemArea {
        padding: 0 20px;
}
.systemArea .orangeTtl {
        text-align: center;
}
.systemArea .bageBox > .orangeTtl {
        margin: 0 0 20px;
}
.systemArea .gridBox {
        display: grid;
}
.systemArea .systemBox {
        gap: 180px;
}
.systemArea .flexBox {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
}
.systemArea .boxList {
        gap: 45px;
}
.systemArea .whiteBtn {
        text-align: center;
        padding: 10px;
}
.systemArea .whiteBtn p {
        width: 100%;
        font-size: 22px;
}
.systemArea .memo {
        line-height: 2.2;
        font-size: 18px;
}
.systemArea .whiteBtn.bage {
        background: var(--bgcolor-05);
}
.systemArea .whiteBtn .minTtl {
        color: var(--thcolor-01);
}
.systemArea .feeBox {
        gap: 80px;
}
.systemArea .firstFee {
        margin: inherit;
}
.systemArea .boxTtl {
        font-size: 20px;
        padding: 0 0 10px;
}
.systemArea small {
        font-size: 16px;
}
.systemArea .wrapGrid {
        gap: 20px;
		display: grid;
}
.systemArea .boxGrid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 15px;
		display: grid;
}
.systemArea .glhBlock {
        max-width: 780px;
        width: 100%;
        margin: 20px auto;
        border-bottom: solid 1px var(--bgcolor-03);
}
.systemArea .dataBox {
        grid-template-columns: 1fr 1fr;
        gap: 25px 100px;
        max-width: 680px;
        align-items: end;
        margin: auto;
}
.systemArea .dataBox .amountBox {
        display: grid;
        padding: 20px 20px 30px;
        border-radius: 5px 5px 0 0;
        position: relative;
}
.systemArea .dataBox .amountBox .whiteBtn {
        align-self: flex-end;
}
.systemArea .dataBox .grayBack {
        background: var(--bgcolor-03);
        height: 300px;
}
.systemArea .dataBox .orangeBack {
        background: var(--thcolor-02);
        height: 180px;
}
.systemArea .dataBox .orangeBack::after {
        content: '13ヶ月目\A以降';
        white-space: pre;
        display: grid;
        place-content: center;
        background: var(--bgcolor-05);
        color: var(--thcolor-02);
        border: solid 1.5px var(--thcolor-02);
        border-radius: 50%;
        width: 100px;
        height: 100px;
        position: absolute;
        left: -20%;
        top: -61%;
        text-align: center;
        line-height: 1.2;
        font-weight: 600;
}
.systemArea .dataBox .txt p {
        justify-content: center;
        line-height: 1;
        text-align: center;
}
.systemArea .shiharaiList {
		padding: 0 0 0 25px;
}
.systemArea .shiharaiList li {
		list-style: circle;
}
@media screen and (max-width: 780px) {
.systemArea .systemBox {
        gap: 80px;
}
.systemArea .boxTtl {
        font-size: 17px;
		gap: 3px;
}
.systemArea .boxList {
        font-size: 16px;
        gap: 20px;
}
.systemArea .whiteBtn {
        padding: 10px 5px;
		font-size: 16.5px;
}
.systemArea .whiteBtn p {
        font-size: 18px;
}
.systemArea .whiteBtn .minTtl {
        line-height: 2;
}
.systemArea .wrapGrid {
        gap: 30px;
}
.systemArea .boxGrid {
        gap: 10px;
        grid-template-columns: 1fr;
}
/*
.systemArea .boxGrid .whiteBtn:nth-of-type(3n) {
        grid-column: 1 / 3;
}
*/
.systemArea .annotation {
		line-height: 2;
    	font-size: 16px;	
}
.systemArea .memo:not(.annotation) {
		font-size: 16.5px;	
}
.systemArea .dataBox {
        gap: 10px;
}
.systemArea .dataBox .amountBox {
        padding: 20px 10px 30px;
}
.systemArea .dataBox .orangeBack::after {
        top: -62%;
        left: 0;
        right: 0;
        margin: auto;
}
.systemArea small {
        font-size: 15px;
}
}
/*-------------------------------
	【下層】実績紹介
-------------------------------*/
.archivementArea {
        padding: 0 20px;
}
.archivementArea .gridBox {
        display: grid;
}
.archivementArea .flexBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
}
.archivementArea .contGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
		padding: 0 0 120px;
}
.archivementArea .whiteBtn {
        border: solid 5px var(--bgcolor-05);
        border-radius: 10px;
        padding: 15px;
}
.archivementArea .longBox {
        grid-row: 2 / 4;
}
.archivementArea .longBtn ul {
        gap: 10px
}
.archivementArea .glaphGrid {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 50px;
		padding: 35px 0 0;
}
.archivementArea .glaphBox {
        grid-column:  1 / 3;
        grid-row: 4 / 6;
}
.archivementArea .eg {
        font-family: var(--ffamiliy-01);
}
.archivementArea .minBox .eg {
        font-size: 80px;
}
.archivementArea .minBox,
.archivementArea .minTtl {
        text-align: center;
}
.archivementArea .minTtl {
        color: var(--thcolor-01);
        font-size: 22px;
        margin: 0 auto;
}
.archivementArea small {
        font-size: 45%;
}
.archivementArea .bageList {
        gap: 5px;
        padding: 20px 0;
}
.archivementArea .bageList p,
.archivementArea .wrapGrid p {
        margin: 0;
}
.archivementArea .bageList .eg {
        font-size: 45px;
}
.archivementArea .bageList .flexBox {
        background: var(--bgcolor-05);
        padding: 10px;
}
.archivementArea .boxList {
        width: 100%;
}
.archivementArea .boxList .flexBox {
        align-items: center;
        gap: 15px;
}
.archivementArea .pointList {
		gap: 10px;
}
.archivementArea .point {
        text-align: left;
}
.archivementArea .boxList .boxTtl::before {
        width: 20px;
        height: 20px;
}
.archivementArea .boxList .flexBox::after {
        content: '';
        width: 100%;
        border-top: dotted 3px var(--bgcolor-04);
        order: 1;
        flex: content;
}
.archivementArea .boxList .boxTtl {
        font-size: 20px;
}
.archivementArea .boxList .eg {
        font-size: 42px;
        order: 2;
}
.archivementArea .orange01::before { background: var(--thcolor-02); }
.archivementArea .orange02::before { background: #EE9447; }
.archivementArea .orange03::before { background: #F6B634; }
.archivementArea .orange04::before { background: #FBD494; }
.archivementArea .orange05::before { background: #FFE6CE; }
.archivementArea .gray::before { background: #E9E9E9; }

.archivementArea .wrapGrid .glaphGrid:nth-of-type(1) figure { max-width: 520px; }
.archivementArea .wrapGrid .glaphGrid:nth-of-type(2) figure { max-width: 530px; order: 1; }
.archivementArea .wrapGrid .glaphGrid:nth-of-type(3) figure { max-width: 480px; margin: 0 30px 0 0; }

.archivementArea .topicsArea {
		padding: 0;
}
.archivementArea .voiceBlock .orangeTtl {
		text-align: center;
}
.archivementArea .voiceBlock .orangeBtn {
		margin: 60px auto 0;
}
@media screen and (max-width: 820px) {
.archivementArea .minTtl {
		font-size: 20px;
}
.archivementArea .boxList .boxTtl {
		font-size: 20px;
}
.archivementArea .boxList .eg {
		font-size: 30px;
}
.archivementArea .wrapGrid {
        gap: 50px;
}
.archivementArea .contGrid,
.archivementArea .glaphGrid {
        grid-template-columns: 1fr
}
.archivementArea .glaphBox {
        grid-column: initial;
        grid-row: initial;
		padding: 30px 15px;
}
.archivementArea .glaphGrid {
        gap: 0;
}
.archivementArea .minBox .eg {
        font-size: 50px;
}
.archivementArea .bageList .eg {
        font-size: 35px;
}
.archivementArea .wrapGrid .glaphGrid:nth-of-type(2) figure {
        order: 0;
}
.archivementArea .wrapGrid figure {
        justify-self: center;
}
}
/*-------------------------------
	【下層】ショッピングガイド
-------------------------------*/
.guidArea {
        padding: 0 20px;
}
.guidArea .orangeTtl {
        text-align: center;
}
.guidArea .gridBox {
        display: grid;
}
.guidArea .innerCont {
        gap: 120px;
}
.guidArea .contGrid {
        gap: 20px;
}
.guidArea .numlist {
        gap: 0;
}
.guidArea .bageBox p, 
.guidArea .numlist .txt,
.guidArea .boxGrid {
        line-height: 2;
}
.guidArea .boxGrid {
        gap: 15px;
}
/*-------------------------------
	【下層】運営会社案内
-------------------------------*/
.companyArea {
	padding: 0 20px;
	width: 100%;
}
.companyArea .lawArea {
	padding: 0;
}
.companyArea .wrapCont {
        display: none;
        opacity: 0;
}
.companyArea .wrapCont.is-active {
        display: block;
        animation-name: displayAnime;
        animation-duration: 2s;
        animation-fill-mode: forwards;
}
@keyframes displayAnime{
from {
        opacity: 0;
}
to {
        opacity: 1;
}
}
.companyArea .orangeTtl {
        text-align: center;
}
.companyArea .bigCont {
        display: grid;
        gap: 5px;
}
.companyArea .double {
        grid-template-columns: 1fr 1fr;
}
.companyArea .flexBox {
        display: flex;
        gap: 15px;
}
.companyArea .year {
        color: var(--thcolor-02);
        opacity: 0.4;
        font-family: var(--ffamiliy-01);
        font-size: 70px;
        padding: 0 0 25px;
        line-height: 0.8;
}
.companyArea .numlist li {
        align-items: flex-start;
}
.companyArea .numlist li .ttl {
        color: var(--thcolor-01);
        font-size: 22px;
}
.companyArea .numlist li .info:nth-of-type(2n) {
        padding: 60px 0 0 40px;
}
.companyArea img {
        max-width: 320px;
}
.companyArea .info {
        line-height: 2;
        display: grid;
        gap: 10px;
		padding: 0 0 0 40px;
}
.companyArea .numlist > li::before {
        content: '';
}
@media screen and (max-width: 940px) {
.companyArea .bigCont {
        gap: 10px;
}
.companyArea .double {
        grid-template-columns: 1fr;
}
.companyArea .flexBox {
        flex-direction: column;
        gap: 0;
}
.companyArea img {
		max-width: 100%;		
}
.companyArea .info {
		padding: 0 0 0 15px;	
}
.companyArea .numlist li .info:nth-of-type(2n) {
		padding: 40px 0 0 15px;
}
.companyArea .year {
		font-size: 40px;
}
.companyArea .numlist li .ttl {
		font-size: 19px;		
}
}
/*-------------------------------
	【下層】理念
-------------------------------*/
.philoArea {
		padding: 0 20px;
}
.philoArea .gridBlock {
		align-items: last baseline;
}
.philoArea .gridBox {
		display: grid;
}
.philoArea .innerBlock {
		gap: 140px 0;
}
.philoArea .nakagawa {
        max-width: 490px;
        width: 100%;
}
.philoArea .imgGrid {
        grid-template-columns: 1fr 0.7fr 1.3fr;
        grid-template-rows: 3fr;
		gap: 10px;
}
.philoArea .imgGrid div:first-of-type {
        grid-column: 1 / 2;
        grid-row: 1/ 3;
}
.philoArea .imgGrid div:nth-of-type(2) {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
}
.philoArea .imgGrid div:nth-of-type(3) {
        grid-column :2 / 3;
        grid-row: 2 / 3;
}
.philoArea .imgGrid div:nth-of-type(4) {
        grid-column: 3 / 4;
        grid-row: 1 / 3;
}
.philoArea .imgGrid img {
		object-fit: cover;
		width: 100%;
  		height: 100%;
}
.philoArea .orangeTtl {
        text-align: center;
}
.philoArea .methodBlock {
		max-width: 760px;
		margin: auto;
}
.philoArea .methodBlock .imgBox {
		padding: 0 0 20px;
}
.philoArea .message {
		word-break: break-all;
}
@media screen and (max-width: 1200px) {
.philoArea .nakagawa {
        max-width: 420px;
}
}
@media screen and (max-width: 980px) {
.philoArea .innerBlock {
  		gap: 90px 0;
}
.philoArea .gridBlock,
.philoArea .message{
		grid-template-columns: 100%;
}
.philoArea .nakagawa {
        justify-self: center;
}
}
@media screen and (max-width: 580px) {
.philoArea .imgGrid {
        grid-template-columns: 1.6fr 1.4fr;
        grid-template-rows: 1fr 0.7fr 1.3fr;
		gap: 10px;
}	
.philoArea .imgGrid div:first-of-type {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
}
.philoArea .imgGrid div:nth-of-type(2) {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
}
.philoArea .imgGrid div:nth-of-type(3) {
        grid-column : 2 / 3;
        grid-row: 2 / 3;
}
.philoArea .imgGrid div:nth-of-type(4) {
        grid-column: 1 / 3;
        grid-row: 3 / 4;
}
}
/*-------------------------------
	【下層】カレンダー
-------------------------------*/
.calendarArea .orangeTtl {
	text-align: center;
}