@charset "UTF-8";
/* CSS Document */

/*--------------------
FONT
--------------------*/

/* zen maru */
@font-face {
    font-family: 'Zen Maru Gothic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ZenMaruGothic-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Zen Maru Gothic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ZenMaruGothic-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Zen Maru Gothic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/ZenMaruGothic-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Zen Maru Gothic';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/ZenMaruGothic-Black.woff2') format('woff2');
}

/* noto sans */
@font-face {
	font-family: 'Noto Sans Japanese';
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url(../fonts/NotoSansJP-Regular.woff2) format('woff2');
}
@font-face {
	font-family: 'Noto Sans Japanese';
	font-style: normal;
	font-display: swap;
	font-weight: 500;
	src: url(../fonts/NotoSansJP-Medium.woff2) format('woff2');
}
@font-face {
	font-family: 'Noto Sans Japanese';
	font-style: normal;
	font-display: swap;
	font-weight: 600;
	src: url(../fonts/NotoSansJP-Bold.woff2) format('woff2');
}

/*--------------------
COMMON
--------------------*/
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  font-style: normal;
  border: 0;
  box-sizing: border-box; }

html {
	height: 100%;
    font-size: 62.5%;
    scroll-padding-top: 70px;
}

/**/
body {
	/*overflow: -moz-scrollbars-vertical;*/
}

html:first-child body {
	min-height: 100%;
	padding-bottom: 1px;
}

body {
	margin: 0;
	padding: 0;
	border: 0;
	/**/
	background: #fff;
	color: #000;
	font-size: 1.6rem;
    font-family: "Zen Maru Gothic", "Noto Sans Japanese", Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;;
    font-weight: 400;
    font-style: normal;
	text-align: justify;
}

strong {
	font-weight: bold;
}

.balloon-title strong{
	font-size: 130%;
}

em{color:#d87228;}

.caption {
    font-size: 80%;
    line-height: 1.5em;
	margin-bottom: 0;
}

.right{text-align:right;}
.center{text-align: center;}

@media (max-width: 768px){
.center {
	text-align: left;
}
}

img {
	max-width: 100%;
    height:auto;
}

a {
	text-decoration: none;
    color: #0b318f;
    transition: .5s;
}

a:hover {
	/**/
	opacity: 0.7;
	transition: .5s;
}

p {
	/**/
	margin-bottom: 1.2em;
    line-height: 2em;
    font-weight: 700;
}

.pc{display: block;}
.tab,.sp {
  display: none; }

@media only screen and (max-width: 1070px) {
.tab {
    display: block; } }

@media only screen and (max-width: 768px) {
.pc {
    display: none; } }


  @media only screen and (max-width: 768px) {
    .sp {
      display: block; } }

/*--------------------
BUTTON
--------------------*/
.button {
    position: relative;
    display: flex;
    /*align-items: center;*/
	text-align: center;
	/**/
	margin: 0 auto 30px;
}

.button a {
	position: relative;
    display: block;
    text-align: left;
    padding: 1em 1em;
    color: #000;
    background: #FFF;
    /* border-radius: 3px; */
    border: 3px solid #000;
    border-radius: 50px;
}

.button a:hover {
	background:#ffe000;
    opacity: 1;
}

/* ボタン カスタム */

.eye .button::after{
  content:"";
  position:absolute;
  right:32px;
  top:50%;
  transform: translateY(-50%);
  width:22px;
  height:22px;
  background: url("../img/arrow-bold.svg") no-repeat center / contain;
}

.eye .button a {
    min-width: 350px;
    padding: 0.5em 0.5em 0.5em 2em;
    font-size:1.5rem;
    font-weight: 500;
    border: 5px solid #000;
}

.button.blue a {
	background: #82DBF7;
}
.button.pink a {
	background: #FFB7E0;
}

.button.blue a:hover,
.button.pink a:hover{
	background:#ffe000;
    opacity: 1;
}

.btn-case{
    position: relative;
    box-sizing: border-box;
    min-height: 96px; 
    flex: 1 1 calc(25% - 18px);
    margin-bottom: 10px;
    width: 100%;
}

.case {
  display: flex;
  gap: 4px;
  align-items: stretch;
}

.btn-case a{
    display: flex;
    width:100%;
    padding: 15px 50px 15px 20px;
    border-radius: 999px;
    flex-direction: column;
    justify-content: center;
    height: 100%;           
    box-sizing: border-box;
    font-size: 1.4rem;
    line-height: 1.2em;
}

.btn-case a p{
    line-height: 1.4em;
    margin-bottom:0;
}

.btn-case a strong{
    font-size:1.6rem;
    margin-bottom:5px;
}

.btn-case:after{
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: url(../img/arrow-bold.svg) no-repeat center / contain;    
}

.button.case-main-button {
    font-weight: 600;
    /* min-width: 100px; */
    align-items: center;
    flex-direction: column;
}
.button.case-main-button a{
    text-align: center;
}

.case-box {
    margin-bottom: 4rem;
}

/* バッジ */
.case-hero-badge{
    display: flex;
    top: 0;
    right: 0;
    /*width: 170px;*/
    align-items: flex-end;
    margin-bottom: 2rem;
    gap:15px;
}

.case-hero-badge img{
    width: 65px;
    height: 65px;
    display: block;
}

.digital-tech-title {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    background: linear-gradient(135deg, #0093e9 0%, #8015cf 100%);
    margin: 0;
}

.case-meta {
    display: flex;
    justify-content: space-between;
}

.badge-text {
    font-size: 5rem;
    color: #0b318f;
    font-weight: 900;
    line-height: 1.2em;
}

.badge-text.pm {
    font-size: 3.5rem;
    line-height: 1.1em;
}

@media (max-width: 1070px){
    
#contents .case h1{
    font-size:2.5rem;
    line-height: 1.5em;
}    
    
  .hero-buttons{
    flex-direction: column;
    gap: 16px;
  }

  .hero-btn{
    width: 100%;
    min-width: auto;
  }
    
.case-meta {
    display: flex;
    flex-direction: column;
}        
}
    
/* タブレット：2列 */
@media (max-width: 1070px){
  .btn-case{
    flex: 0 0 calc((100% - 24px) / 2);
    max-width: none !important;  
  }
}

/* スマホ：1列 */
@media (max-width: 768px){

.case-hero-badge img {
    width: 45px;
    height: 45px;
}    
    
.badge-text{
    font-size:4rem;
}
  
    
.digital-tech-title {
    padding: 5px 10px;
}
    
  .btn-case{
    flex: 0 0 100%;
  }
}  

/*--------------------
A:BEFORE
--------------------*/
.arrow:before,
.blank:before {
	display: inline-block;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	vertical-align: baseline;
}

.blank:before {
	/**/
	content: "\f35d";
	padding-right: 5px;
}

.arrow:before {
	/**/
	content: "\f105";
	padding-right: 5px;
}

/*--------------------
HEADER
--------------------*/
.head,
/*.head nav,*/
.foot {
}

header {
	/*width: 100%;*/
}

.head {
	display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.75em 3rem;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    transition: 0.3s;
    /* height: 100px; */
}

.head h1 {
	/*width: 450px;*/
	margin-bottom: 0;
}

.head h1 a {
	display: block;
	background: url("../img/top-button.svg") no-repeat center left /contain;
    width: 420px;
    height: 57px;
    -webkit-transition: .3s;
    transition: .3s;
}


.head nav {
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	/*width: calc(100% - 200px);*/
}

.head nav a {
	/*font-size: 90%;*/
	line-height: 1.2em;
	font-weight: 700;
	color: #000;
	text-decoration: none;
    display: block;
	padding-bottom: 6px;
    border-bottom: 2px solid #000;
    letter-spacing: 2px;
}

.head li {
	display: inline-block;
	/**/
	margin-left: 20px;
}

.head li a:hover {
  position: relative;
  display: inline-block;
  color: #ffd400;
  -webkit-text-stroke: 5px #000;
  paint-order: stroke fill;
  border-bottom: 2px solid #ffd400;    
}

.sp-bottom{
    display: none;
}

@media only screen and (max-width: 1070px) {
    
.head {
    padding: 1rem 1.5rem;
    height:60px;
	}
    
.head h1 a {
    width:300px;
} 
}

@media only screen and (max-width: 640px) {
	
.head h1 a {
    width:260px;
} 
}

#spnav {
	display: none;
}

.resolution strong {
    font-weight: bold;
    color: #d22b0b;
    /*font-size: 1.2rem;*/
}

.logo {
    max-width: 500px;
    margin: 0 auto 6rem;
}

.eye {
    width:100%;
    position: relative;
    /*height: 100vw;*/
    background-image: url("../img/bg-stripe.png");
    background-size: cover;
    margin: 0 auto;
    padding:3rem 0 4rem;
}

.eye img{
    width: min(1400px, 100%);
    margin: 30px auto 0;
    display: block;    
}

.text-container {
    position: absolute;
    gap: 24px;
    bottom: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.button-container {
    display: flex;   
    gap: 24px;
    bottom: 0;
    margin: 0 auto 5rem;
}

.button-container  .button{
    align-items: center;
} 

@media (max-width: 1200px){

.eye{
    min-height:650px;
}
}
    
@media (max-width: 768px){
    
.eye{
    min-height: auto;
}    
    
.text-container {
    top: 50%;    
}
    
  .button-container{
    flex-direction: column;
    gap: 5px;
  }

  .button{
    width: 100%;
  }
   .button-container .button {
    margin: 0 auto 10px;
  }
    
  .logo {
    max-width: 250px;
    margin: 0 auto 1.5rem;
  }
    
    .button.case-main-button a{
        display: block;
        width: 100%;
    }    
    
    
} 

/*--------------------
CONTENTS
--------------------*/

.case-study #contents{
    margin-top: 150px;   
}

#contents,
aside {
	width: 100%;
}

article {
	margin: 0 auto;
	/**/
	padding: 50px 0;
	width: 90%;
	max-width: 900px;
}

aside {
	/**/
	padding: 50px 0;
	background: #eee;
	text-align: center;
}

section {
  padding: 70px 0 70px;
  /*overflow: hidden;*/
  background: var(--sec-bg, #ffe000);
}

section:last-child,
section> :last-child {
	margin-bottom: 0;
}

section.bg_orange01 {
    background: #f9eee6;
}

section.bg_orange02 {
    background: #e08e53;
}

section.bg_yellow {
    background: #f4f2d3;
}

.inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 90%; }

.inner-1000 {
  max-width: 1000px;
  margin: 0 auto;
  width: 90%; }

.narrow {
  max-width: 800px;
  margin: 0 auto;
  width:80%;
}

#contents h1{
    text-align: center;
    font-size: 3.5rem;
    line-height: 1.4em;
}

#contents .meta h1 {
    text-align: left;
    margin-bottom: 15px;
    line-height: 1.2em;
}

#contents .meta h1 span{
    font-size:2.8rem;
}

.case.contents #contents h1{
    text-align: left;
    margin-bottom: 3rem;
}

.case.contents #contents h1#list{
    text-align: center;
    font-size:3rem
}

.number{
    border-radius: 100px;
    background: #FFF;
    border: 3px solid #000;
    text-align: center;
    font-size: 3rem;
    font-weight: 600;
    padding: 1rem;
    max-width: 300px;
    margin: 20px auto 7rem;;   
}

@media only screen and (max-width:768px) {

#contents h1{
    font-size:2.8rem;
}
  
    
.number {
    font-size: 2rem;
    max-width: 200px;
    margin-bottom: 3rem;
}
}

/*--------------------
GRID
--------------------*/
.grid,
.flex2,
.flex2-2,
.flex3,
.flex4,
.flex5,
.flex6{
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: stretch;
	/*   Safari etc. */
	-ms-align-items: stretch;
	/*  IE10        */
	align-items: stretch;
	-webkit-flex-wrap: wrap;
	/* Safari6.1以降 */
	-ms-flex-wrap: wrap;
	/*IE10*/
	flex-wrap: wrap;
}

/* 最終行の間隔調整 */
.flex4:before,
.flex5:before,
.flex6:before{
	content: "";
	display: block;
	order: 1;
}

.flex3:after,
.flex4:after,
.flex5:after,
.flex6:after{
	content: "";
	display: block;
}

.grid3-2 {
	width: 65.667%;
}

.grid4-3 {
	width: 74.25%;
}

.grid4-2,
.flex2>*,
.flex2-2>* {
	width: 48.5%;
}

.grid3-1,
.flex3>*,
.flex3:after {
	width: 31.333%;
}

.grid4-1,
.flex4>*,
.flex4:before,
.flex4:after {
	width: 22.75%;
}

.flex5>*,
.flex5:before,
.flex5:after {
	width: 17.6%;
}

.flex6>*,
.flex6:before,
.flex6:after {
	width: 15.8333%;
}

.grid>*,
.flex2>*,
.flex2-2>*,
.flex3>*,
.flex4>*,
.flex5>*,
.flex6>*{
	margin-bottom: 30px;
}

/* pagemove */
#pagemove {
	position: fixed;
	line-height: 60px;
	right: 30px;
    bottom:20px;
	width: 70px;
	height: 70px;
	z-index: 200;
	opacity: 0.5;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

#pagemove:hover {
	line-height: 45px;
	opacity: 1;
}


/*--------------------
TITLE
--------------------*/
h1 {
	/**/
    position: relative;
	text-align: center;
	margin-bottom: 1.5em;
	font-size: 2.8rem;
}

#index section h1{
	margin-bottom: 8rem; 
}

#index section h1::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  width: 64px;
  height: 4px;
  border-radius: 999px;
  background: #000;
}

#index .case h1,
#index .movie h1,
#index .about h1{
  margin-top:4rem;
}s

h2 {
	/**/
	margin-bottom: 1.25em;
	font-size: 3rem;
	text-align: center;
    font-weight: 600;
    letter-spacing: 1px;
}

span.number {
    font-size: 140%;
    color: #d87228;
}

h3 {
	/**/
	margin-bottom: 0.5em;
	font-size: 1.8rem;
    font-weight: 600;
}

h4{
	/**/
	margin-bottom: 0.5em;
	font-size: 120%;
}

h5 {
	/**/
	margin-bottom: 0.5em;
	font-size: 100%;
}

@media only screen and (max-width: 768px) {
    
#index section h1 {
    margin-bottom: 5rem;
}
    
h2 {
	/**/
	font-size: 2.5rem;
    line-height: 1.3em;
    margin-bottom: 1.2em;
}

h3 {
	/**/
	font-size: 1.8rem;
    line-height: 1.3em;
}

h4{
	/**/
} 
}

#breadcrumbs {
	display: block;
	width: 100%;
	/**/
	padding: 10px 30px;
	text-align: center;
	/*background: #eee;*/
	font-size: 85%;
}

#breadcrumbs a:after {
	display: inline-block;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	/**/
	margin: 0 0.7em;
	color: #555;
	content: "\f105";
}

/*--------------------
TABLE
--------------------*/
table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	/**/
	margin: 0 0 30px;
	border-top: #ccc 1px solid;
}

th,
td {
	/**/
	padding: 0.75em 15px;
	border-bottom: #ccc 1px solid;
	line-height: 1.4em;
}

th {
	white-space: nowrap;
	/**/
	background: #dbd7d6;
	/*text-align: right;*/
}


td {
	background: #FFF;
}

/*--------------------
LIST
--------------------*/
ul,
ol {
	/**/
	padding-left: 1.2em;
}

article ul,
article ol {
	/**/
	margin-bottom: 30px;
}

.ul_nav {
	padding-left: 0;
	list-style: none;
	text-align: center;
	/**/
	margin-bottom: 30px;
}

.ul_nav li {
	display: inline-block;
	/**/
	margin: 0 3px 10px;
	font-size: 90%;
}

.ul_nav a {
	display: inline-block;
    width: 100%;
    padding: 0.8em 1.8em;
    background: #ecbd2c;
    color: #ffffff;
    border-radius: 4px;
}

.ul_nav a:before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	/**/
	padding: 0 5px 0 0;
	content: "\f107";
}

@media screen and (max-width:640px) {
.ul_nav li{
	display: block;
}
}

table :last-child,
ul :last-child,
ol :last-child,
dl :last-child {
	margin-bottom: 0;
}

.scroll-up {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(0px);
  transition: all 1s;
}
.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

@media only screen and (max-width: 1080px) {
    .eye .grid3-1{width: 47%;}
}

/* ------------------------------------------
for - 640px
------------------------------------------ */

@media screen and (max-width:640px) {

/*--------------------
COMMON - 640px
--------------------*/
	body {
		/*font-size: 95%;*/
	}
	
.inner {
    width: 85%;
}
	
section {
    padding: 50px 0;
}
    

/*--------------------
GRID - 640px
--------------------*/
	.grid3-1,
	.grid3-2,
	.grid4-1,
	.grid4-2,
	.grid4-3,
	.flex2>*,
	.flex3>*,
	.flex3:after,
	.flex5>*,
	.flex5:before,
	.flex5:after{
		width: 100%;
	}

	.flex2-2>*,
	.flex4>*,
	.flex4:before,
	.flex4:after {
		width: 47%;
	}
	
	.flex6>*,
	.flex6:before,
	.flex6:after {
		width: 31.33%;
	}    
	
.flex4>*, .flex4:before, .flex4:after {
    width: 100%;
}

    
/* ------------------------------------------
TABLE - 640px
------------------------------------------ */
	table {
		/**/
		border-top: #ccc 3px solid;
	}

	thead {
		display: none;
	}

	th,
	td {
		display: block;
		width: 100%;
		/**/
		padding: 0.5em;
	}

	td:last-child {
	}


/* ------------------------------------------
FOOTER - 640px
------------------------------------------ */
	footer {
		padding: 50px 0;
    font-size: 90%;	
	}

	.foot {
		/**/
		width: 90%;
		text-align: center;
		margin: 0 auto 20px;
    	padding: 0 0 20px;
	}

	.foot>div {
		width: 100%;
	}
	
	
	.foot .grid{
		margin-bottom:0;
	}
	
	footer img {
    width:60%;
		margin: 0 auto;
}
	
	footer nav{display:none;}	

	footer ul {
		padding-left: 0;
	}

	footer li {
		list-style: none;
	}

	footer li a {
		display: inline-block;
		width: 100%;
		/**/
		padding: 0.8em;
		border-bottom: solid 1px #999;
	}

}


@media only screen and (max-width:768px) {	
/*--------------------
HEADER - 640px
--------------------*/
	.head nav {
		display: none;
	}

	#spnav {
		display: block;
		position: fixed;
		z-index: 100;
		right: 5%;
		width: auto;
		height: 60px;
	}
	
#spnav i.fas.fa-bars {
    font-size: 30px;
	margin-left: 8px;
	color: #000;
}
    
#spnav span {
	display: inline-block;
}	

	#spnav>a {
		width: 100%;
		height: 100%;
		z-index: 10;
		cursor: pointer;
		text-align: center;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.remodal>div {
		max-height: 75vh;
		overflow-y: scroll;
	}
    
    .sp-bottom {
        bottom: 0;
        position: fixed; 
        background: #d87228;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 55px;
        text-align: center;
        right: 0;
    }    
    
    .sp-bottom a{
        color:#FFF;
    }  
    
}

a.anchor{
    display: block;
    padding-top: 200px;
    margin-top: -200px;
}


h2 {
    margin-bottom: 0.5em;
}

/* top */
section.about {
    position:relative;
    overflow:visible;
    box-shadow: 0 -2px 0 #ffe000 inset;
}

section.case {
    background: #82DBF7;
    overflow:visible;    
}

section.movie {
    background: #FFB7E0;
}

section.backnumber {
    background: #FFF;
}

/* scallop-top を付けたセクションなら全部波が出る */
.scallop-top{
  position: relative;
  overflow: visible;
  background: var(--sec-bg, #ffe000);
  /*box-shadow: 0 -2px 0 var(--sec-bg, #ffe000) inset;*/
}

.scallop-top::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-34px;
  height:44px;
  z-index:10;
  pointer-events:none;

  background:
    radial-gradient(ellipse 44px 30px at 34px 34px,
      var(--sec-bg) 99%, transparent 101%)
      0 0 / 68px 34px repeat-x,

    radial-gradient(ellipse 30px 20px at 34px 40px,
      var(--sec-bg) 99%, transparent 101%)
      34px 0 / 68px 34px repeat-x,

    linear-gradient(var(--sec-bg), var(--sec-bg))
      0 100% / 100% 8px no-repeat;
}
.about.scallop-top,
.case.scallop-top,
.movie.scallop-top{
  margin-top: -4px;   /* ←上のセクションに2px食い込ませる */
  padding-top: 4px;   /* ←内容位置は変えない */
}

section.about{ --sec-bg:#ffe000; }
section.case{   --sec-bg:#82DBF7; }
section.movie{   --sec-bg:#FFB7E0; }
section.backnumber{   --sec-bg:#FFF; }

/* ★線消し専用 */
.scallop-top::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:0;
  height:2px;                 /* 1〜3pxでOK */
  background: var(--sec-bg, #ffe000);
  z-index:1;                  /* 波の下 */
  pointer-events:none;
}

.case-button-box{
    display: grid;
    gap:10px; flex-wrap: wrap;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 40px;
}

@media (max-width: 1070px){
.case-button-box{    
    grid-template-columns: repeat(2, 1fr);    
}
}

@media (max-width: 768px){
.case-button-box{    
    display: block;  
}
}

.video-box-wrapper {
    display: flex;
    justify-content: flex-start;
    gap:20px;
}

video {
    margin-bottom: 1.5rem;
}

.video-box {
    margin: 0 auto 5rem;
    text-align: left;
    width: 33.333%;
}

.video-box img {
    width: 100%;
    margin-bottom:10px;
    height: auto;
}

.video-box h2{
    text-align: left;
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}

.video-box h3{
    font-size:1.6rem;
    padding-left: 4em;
    text-indent: -4em;
}

/*contents*/
.case #contents {
    margin-top: 150px;
}

.case-content{
  padding: 56px 24px 72px;
  background:#fff;
  text-align: center;
}

.meta p{
    display: inline-block;
    font-size: 1.8rem;
    line-height: 1.2em;
}

span.tag {
    display: inline-block;
    background: #FFF;
    color: #0b318f;;
    font-size: 1.8rem;
    font-weight: 700;
    border-radius: 4px;
    padding: 5px 10px;
    margin-right: 10px;
}

@media (max-width: 768px){
span.tag {    
    /*display:table;*/
    margin-bottom:5px;
} 
    
.video-box-wrapper {
    display: block;
}
.video-box {
    width: 100%;
}    
}    

/* --- title（両端ライン＋中央ノッチ） --- */

.balloon-title {
    color:#0b318f;
    position: relative;
    display: inline-block;
    background-color: #fff;
    border: solid 2px #0b318f;
    min-width: 240px;
    max-width: 100%;
    text-align: center;
    line-height: 1.35em;
    font-size: 2.5rem;
    padding: 10px 20px;
    margin: 0 auto 30px;
}
.balloon-title:before,
.balloon-title:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.balloon-title:before {
    border: solid 12px transparent;
    border-top: solid 12px #0b318f;
}
.balloon-title:after {
    border: solid 14px transparent;
    border-top: solid 14px #fff;
    margin-top: -5px;
}
.balloon-title p {
    margin: 0;
    padding: 0;
}

.case-lead{
  color:#0b318f;
  position: relative;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.4em;
  letter-spacing: 0.5px;
  text-align: center;
  font-family: "Zen Maru Gothic", "Noto Sans Japanese", Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif; 
}

.case-lead-line{
  position: absolute;
  left: 0;
  top: calc(1.5em / 2);
  transform: translateY(-50%);
  width: 60px;
  height: 3px;
  background: #00A0E9;
}

.case-grid{
  margin: 0 auto;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
}

.case-grid:not(:has(.case-photo)){
  grid-template-columns: 1fr;
}

.case-desc{
  column-fill: balance;
  font-family: "Noto Sans Japanese", Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif; 
  text-align: left;
}
.case-desc p{
  font-size: 1.6rem;    
  margin: 0 0 25px;
  line-height: 1.6em;
  font-weight:400;    
}

/* photo box */
.case-photo{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
    box-sizing: border-box;
}

.case h1{
    text-align: left;
}

@media (max-width: 1070px){
.case #contents {
    margin-top: 110px;
}    
    
  .case-grid{
    grid-template-columns: 1fr;
  }
  .case-desc{
    columns: 1;
  }
  .case-lead{
    font-size: 24px;
  }
  .bubble-title{
    font-size: 30px;
    line-height: 1.5em;
  }
}
.base-title {
    font-size:3.5rem;
    text-align: center;
    font-weight:600;
    margin-top:4rem;    
}


@media only screen and (max-width:768px) {
    
.case-lead{
  /*padding-left:50px;*/
}

.case-lead-line{
  width: 40px;  
}    
      
.base-title {
    font-size:2.8rem;
    text-align: center;
    font-weight:600;
}
    
.bubble-title::before {
    width: min(500px, 90%);    
}  
}


/* point */
.point-section{
    background:#6abeff;
}

/* 全体のラッパー */
.main-wrapper {
    position: relative;
     /*padding-top: 30px; */
}

.info-box {
    flex: 2;
    border: 3px solid #0b318f;
    border-right: none;
    padding: 25px;
    position: relative;
    color: #0b318f;
}

.info-box .label-point {
    position: absolute;
    top: -27px;
    left: 40px;
    background-color: #6abeff;
    font-size: 3.5rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1;
}

.info-box .label-point .dot {
    width: 8px;
    height: 8px;
    background-color: #0b318f;
    border-radius: 50%;
}

.info-box::after {
    content: '';
    position: absolute;
    top: -3px;
    right: 0;
    left: calc(0px + 120px + 30px);
    height: 5px;
    background-color: #68BEFE;
}

/* info-box内のレイアウト設定 */
.info-content-wrapper {
    display: flex;
    align-items: center; /* 画像を中央揃え */
    gap: 20px;
}


@media only screen and (max-width:768px) {
.info-content-wrapper{
    display: block; 
}
}



.info-text-side { flex: 1.2; }
.image-section { flex: 1; text-align: center; }

/* 見出し等の装飾 */
.main-title, .message-title {
    font-size: 20px;
    margin: 0 0 5px 0;
}

h2.main-title {
    text-align: left;
}

.divider {
    border: none;
    border-top: 2px solid #0b318f;
    margin-bottom: 20px;
}

.sub-title {
    font-size: 18px;
    margin-bottom: 10px;
}

.description, .message-text {
    font-size: 14px;
    line-height: 1.6;
    text-align: justify;
    font-family: "Noto Sans Japanese", Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;
    font-weight:500;
}

.image-section img {
    width: 100%;
    height: auto;
    /*border: 1px solid #0b318f;*/
}

.caption {
    font-size: 12px;
    margin-top: 8px;
    text-align: right;
    font-family: "Noto Sans Japanese", Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;
    font-weight:400;
}

/* 右側メッセージエリア (枠付き) */
.message-box {
    flex: 1;
    border: 3px solid #0b318f;
    padding: 25px;
    position: relative;
}

.message-box::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 30px;
    height: 3px;
    background-color: #6abeff;
}

.content-wrapper {
    display: flex;
    align-items: stretch;
}

img.point-icon {
    display: inline-block;
    width: 25px;
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .content-wrapper {
        flex-direction: column;
    }
    .info-box {
        border-right: 3px solid #0b318f;
    }
    .info-box::after {
        display: none;
    }
    .message-box {
        margin: 20px 0 0 0;
    }
    .message-box::after {
        display: none;
    }
}

.message-grid{
  width: min(1200px, 100%);
  margin: 0 auto;
  display: flex;
  gap: 24px;
}

.message-photo{
  color: #fff;
  place-items: center;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .12em;
  min-width: 300px;    
}

.message-box{
  color: #0b318f;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-family: "Noto Sans Japanese", Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;     
}

.message-title{
    font-family: "Zen Maru Gothic", "Noto Sans Japanese", Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;
}


.message-title::before{ top: 0; }
.message-title::after{ bottom: 0; }

/* 小見出し */
.message-lead{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .06em;
}

.message-text{
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.6em;
    color: #0b318f;
}

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

.btn-case.is-active a{
  background:#aaaaaa;
}

.backnumber-button-box {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.backnumber-button-box .btn-case{
    min-height: auto;
    flex: 1 1 calc(33.33% - 18px);  
}

@media (max-width: 768px){
.backnumber-button-box { 
    flex-direction: column;
    margin-bottom:1rem;
    gap: 10px;
}
}

/* 概要　overview box */

.overview-box {
    width: 70%;
}

.overview-box{
  border: 3px dashed #0b318f;
  border-radius: 10px;
  padding: 16px 18px;
  font-family: "Noto Sans Japanese", Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;    
}

.overview-title{
    margin: 0 0 5px;
    color: #0b318f;
    font-weight: 600;
    font-size:  2.5rem;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Zen Maru Gothic", "Noto Sans Japanese", Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;
}
.overview-title::before{
  content:"";
  width: 25px;
  height: 2px;
  background:#0b318f;
  border-radius:999px;
  opacity:.9;
}

.overview-box .grid3-2,
.overview-box .grid3-1{
    margin-bottom:0;
}

.overview-box p{
  font-size: 1.4rem;
  line-height: 1.5em;
  font-weight: 400;
  text-align: left;
}


/* right card */
.disaster-badge{
  background: linear-gradient(180deg, #3a39ff 0%, #2f75ff 100%);
  border-radius: 10px;
  padding: 20px;
  color:#fff;
  width:30%;
  font-family: "Noto Sans Japanese", Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;  
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;    
}

.disaster-badge img {
    height: 80px;
}

.disaster-badge h4{
  margin:0;
  text-align:center;
  font-weight: 900;
  letter-spacing:.12em;
  border-top: 2px solid #FFF;    
  border-bottom: 2px solid #FFF;
  font-size:2rem;
  width: 95%;
  line-height: 1.5em;
  font-family: "Zen Maru Gothic", "Noto Sans Japanese", "Hiragino Sans", ヒラギノ角ゴシック, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, Verdana, "ＭＳ Ｐゴシック", sans-serif;
}

.disaster-badge p{
    margin: 10px 0 10px;
    text-align: center;
    font-weight: 600;
    font-size: 3.5rem;
    line-height: 1.3em;
    letter-spacing: .12em;
}

.disaster-badge p.small{
    font-size: 2.5rem;
    line-height: 1.2em;    
}

.overview-wrapper {
    display: flex;
    gap:20px;
}


@media (max-width: 768px){
  .overview-wrapper {
    display: block;
}
    
    .overview-title{
        text-align: left;
    }
    
    .overview-box {
    width:100%;
    margin-bottom: 20px;
}
    .disaster-badge{
        width: 70%;
        margin: 0 auto;
    }  
}

span.tume {
    letter-spacing: -20px;
}

.link-box {
    text-align: left;
}

/* eye */

.about{
  position: relative;
  overflow: hidden;
  background: #ffe000;
}

.about-bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.about-bg .bg-left,
.about-bg .bg-right{
  position: absolute;
  top: 10px;
  bottom: 0;
  height: 100%;
  width: clamp(120px, 13vw, 180px);
  object-fit: contain;
  opacity: .75;
}

.about-bg .bg-left{ left: 5vw; }
.about-bg .bg-right{ right: 5vw; }

.about-illust{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.about-illust .ill{
  position: absolute;
  height: auto;
  max-width: none;
}

.about-illust .ill--sonae{
  left:15vw;
  top: 130px;
  width: clamp(150px, 12vw, 200px);
}

.about-illust .ill--hinan{
  right:15vw;
  top: 130px;
  width: clamp(150px, 12vw, 200px);
}

.about-illust .ill--kisho{
  left: 20vw;
  bottom: 60px;
  width: clamp(70px, 8vw, 220px);
}

.about-illust .ill--taisaku{
    right: 20vw;
    bottom: 60px;
    width: clamp(70px, 8vw, 240px);
}

.about .inner{
  position: relative;
  z-index: 2;
  max-width: 1260px;
  margin: 0 auto;
  text-align: center;
}

.about p{
    /*text-align: justify;*/
    font-size:2rem;
}

@media (min-width: 1700px){
  .about{
    padding-left: 0;
    padding-right: 0;
  }

  .about .inner{
    margin-inline: auto;
  }

  .about-illust .ill--sonae,
  .about-illust .ill--hinan{
    width: 200px;
  }
    
  .about-illust .ill--kisho,
  .about-illust .ill--taisaku{
    width: 130px;
  }    

  .about-bg .bg-left,
  .about-bg .bg-right{
    width: 250px;
  }
    
    .about-illust .ill--sonae{
        left:25vw;
    } 
    .about-illust .ill--hinan{
        right:25vw;
    }   
    .about-illust .ill--kisho{
        left:25vw;
    }    
    .about-illust .ill--taisaku{
        right:25vw;
    } 
    
  .about-bg .bg-left{
      left:15vw;
  } 
  .about-bg .bg-right{
      right:15vw;
  }    

}


@media (max-width: 1070px){  
    
.about-bg .bg-left{ left: 0vw; }
.about-bg .bg-right{ right: 0vw; }   

    .about-illust .ill--sonae,
    .about-illust .ill--hinan{
        top:30px;
    }    
    
}

@media (max-width: 768px){
  .about .inner{
    max-width: 680px;
    padding:80px 16px 90px;
  }
}

@media (max-width: 768px){

.about-bg .bg-left,
.about-bg .bg-right{
  position:absolute;
  width: clamp(750px, 10vw, 180px);
  height:auto !important;
  max-height:none;
  object-fit:contain;
  transform:none !important;
}

.about-bg .bg-left{
  left: 0;
  top: 10px;
  bottom:auto !important;
  right:auto;
}
    
.about-bg .bg-right{
  right: 0;
  bottom: 0;
  top:auto !important;
  left:auto;
}
}

.chapter-title {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 25%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  text-align: center;
  padding: 3px 0;
  margin-bottom: 20px;
}

.chapter-title h2 {
  color: #1e6bd6;
  font-weight: 700;
  font-size: 25px;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  margin-bottom:0;
  font-family: "Noto Sans Japanese", Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;
    
  /* グラデーション文字 */
  background: linear-gradient(90deg, #1e6bd6 0%, #6700DF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* 念のため */
  background-clip: text;
  color: transparent;
}

@media (max-width: 768px){
.chapter-title h2{
    display: block;
    padding: 3px 0;
    font-size: 20px;    
}
    
.chapter-number,
.chapter-text{
    display: block;
    width: 100%;
    }  
}

.chapter-number {
  font-weight: 700;
}

.chapter-text {
  font-weight: 700;
}

.page-chapter-title {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.8) 25%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.2) 80%,  
    rgba(255, 255, 255, 0) 100%
  );
  text-align: left;
  padding: 10px 20px;
  margin-bottom: 20px;
}

.page-chapter-title-text {
  color: #1e6bd6;
  font-weight: 700;
  font-size: 25px;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  margin-bottom:0;
  font-family: "Noto Sans Japanese", Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;
  /* グラデーション文字 */
  background: linear-gradient(90deg, #1e6bd6 0%, #6700DF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 念のため */
  background-clip: text;
  color: transparent;    
}

.btn-case strong span {
    padding-left: 10px;
    font-size: 12px;
}

/* test */
.image-wrap {
  display: flex;
  gap: 20px;
  margin-bottom: 5rem;    
}

.img-box:first-child {
  width: 40%;
}

.img-box:last-child {
  width: 60%;
}

.img-box {
  aspect-ratio: 2 / 1; /* ←これが重要 */
  overflow: hidden;    
}

/* 左：トリミングなし */
.img-box:first-child img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 右：トリミングあり */
.img-box:last-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px){
.image-wrap {
    display:block;
}

.img-box:first-child {
    aspect-ratio: auto;
}
    
    .img-box:first-child,
    .img-box:last-child{
        width: 100%;
    }    
}