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

body {
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: 'メイリオ' ,Meiryo, 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'ＭＳ Ｐゴシック' , 'Osaka' ,sans-serif;
	color : #333333; /* 標準文字色 */
}

html {
	margin: 0;
	padding: 0;
}

.article {
	margin: 0 3%;
	padding: 0 0 5% 0;
	text-align: center;
}

.article p {
	font-size: clamp(12px, 1.4vw, 18px);
	margin: 0;
}

.container {
	  position: relative;
	  background: #ff9600;
	  width: 100%;
	  height: 50%;
	  margin-bottom: 50px;
	  padding: 3% 0;
}
/*
.wave {
	  position: absolute;
	  height: 75px;
	  width: 100%;
	  background: #ff9600;
	  bottom: 0;
}

.wave::before, .wave::after {
	  content: "";
	  display: block;
	  position: absolute;
	  border-radius: 100% 50%;
}

.wave::before {
	  width: 55%;
	  height: 100px;
	  background-color: #fff;
	  right: -1.5%;
	  top: 60%;
}
.wave::after {
	  width: 55%;
	  height: 109px;
	  background-color: #ff9600;
	  left: -1.5%;
	  top: 40%;
}
*/

.container {
	color: #fff;
	text-align: center;
}

.container h2 {
	font-size: clamp(38px, 8vw, 70px);
	margin: 0;
	padding: 0;
}

.container p {
	font-size: clamp(12px, 1.4vw, 18px);
}

h3 {
	font-size: 26px;/*clamp(14px, 2.5vw, 26px);*/
  	position: relative;
  	line-height: 1.4;
  	padding: 0.25em 1em;
  	display: inline-block;
	margin: 2% 0;
}

h3:before, h3:after { 
  content:'';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
}

h3:before {
  border-left: solid 3px #ff5722;
  border-top: solid 3px #ff5722;
  top:0;
  left: 0;
}

h3:after {
  border-right: solid 3px #ff5722;
  border-bottom: solid 3px #ff5722;
  bottom:0;
  right: 0;
}

.number01 img, .number02 img, .number04 img {
	width: 60%;
	max-width: 900px;
	display: block;
	margin: 0 auto;
}

.number03 img {
	width: 100%;
	height: 100%;
}

.photo-layout {
	display: grid;
	grid-template-rows: 300px 300px 300px;
	grid-template-columns: 400px 500px;
	place-content: center;
	width: 100%;
}

#report01 {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}

#report02 {
	grid-row: 2 / 3;
	grid-column: 1 / 2;
}

#report03 {
	grid-row: 3 / 4;
	grid-column: 1 / 2;
}

#report04 {
	grid-row: 1 / 4;
	grid-column: 2 / 3;
}

/* =======================================================
  レスポンシブ設定
======================================================= */
@media screen and (max-width: 568px) {
	h3 {
		font-size: 16px;
	}
	
	h3:before, h3:after {
		width: 15px;
  		height: 20px;
	}
	
	h3:before {
		border-left: solid 2px #ff5722;
		border-top: solid 2px #ff5722;
	}
	
	h3:after {
        border-right: solid 2px #ff5722;
        border-bottom: solid 2px #ff5722;
	}
	
	.number01 img, .number02 img, .number04 img {
		width: 60%;
		margin-bottom: 2%;
	}

	.number03 img {
		margin-bottom: 2%;
		max-width: 100%!important;
		display: block;
	}
	
}

@media screen and (max-width: 1100px) {
	.photo-layout {
		display: block;
		width: 60%;
		margin: 0 auto;
	}
	
	.number03 img {
		margin-bottom: 2%;
	}
}