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

body {
  /* フォントの種類 */
  font-family: var(--cocoon-default-font);
  /* フォントのサイズ */
  font-size: var(--cocoon-default-text-size);
  /* フォントの色 */
  color: var(--cocoon-text-color);
  /* カーニングの設定 */
  /* 行間の設定 */
  line-height: 1.8;
  margin: 0;
  overflow-wrap: break-word;
  background-color: #f4f5f7;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
}
header {
	height: 10vh;
	text-align: center;
	font-size: 2rem;
	letter-spacing: 0.2rem;
	font-weight: 700;
	line-height: 10vh;
}
.container {
  display: flex;
  width: 100vw;
  height: 90vh;
}

.link-half {
  flex: 1; /* 幅 50% */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
  text-decoration: none;
}
a:hover {
	opacity: 0.7;
      transition:0.5s
}

.match, .keisho {
	position: relative;
  width: 100vw;
	text-align: center;
	margin: 0 auto;
}
.match {
	background: #DDF2F3;
}
.keisho {
	background: #C3E8FB;
}
img { 
	width: 70%;
	height: auto;
    margin: 35vh auto;
    display: block;}
span {
    display: block;
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    font-size: 1.4rem;
	font-weight: 700;
}
.match span {
    color: #12ABB2;
}
.keisho span {
    color: #0091DC;
}


@media screen and (max-width: 844px), (max-width: 896px) and (orientation: landscape) {
	header {
		font-size: 1.6rem;
	}
	.container {
	  display: grid;
	  width: 100vw;
	}
	img {
		width: 90%;
		height: auto;
		margin: 18vh auto;
		/* display: block; */
		}
	span {
		bottom: 30px;
		font-size: 1.2rem;
		}
}

@media screen and (max-width: 430px){
	header {
		height: 5vh;
		line-height: 5vh;
		letter-spacing: normal;
		font-size: 1.4rem;
	}
	.container {
	  height: 95vh;
	}
	span {
		bottom: 60px;
		}
}

/* 代診 */
.container2 {
	text-align: center;
}
.container2 img.img01 { 
	width: 40%;
	height: auto;
    margin: 5vh auto 0;
    display: block;
}
.container2 img.img02 {
	width: 50%;
	height: auto;
    margin: 20px auto;
    display: block;
}
.container2 h1 { 
	font-size: 3.4rem;
	line-height: 1.2;
	letter-spacing: 0.2em;
	color: #BBB;
}
.container2 p { 
	font-size: 1.2rem;
	line-height: 1.8;
	padding-bottom: 60px;
}

@media screen and (max-width: 844px), (max-width: 896px) and (orientation: landscape) {
	.container2 img { 
	}
	.container2 img.img01 { 
		width: 100%;
		height: auto;
		margin: 10vh auto 40px;
		display: block;
	}
	.container2 img.img02 {
		width: 90%;
		height: auto;
		margin: 0 auto;
	}
	.container2 h1 { 
		font-size: 2.4rem;
		letter-spacing: 0.1em;
	}
}




/* pcsp */
.pc-only {display: block;}
.sp-only {display: none;}
.pc-block {display: block;}
.sp-block {display: none;}
.pc-inline {display: inline;}
.sp-inline {display: none;}

@media screen and (max-width: 767px), (max-width: 896px) and (orientation: landscape) {
  .pc-only {display: none !important;}
  .sp-only {display: block;}
  .pc-block {display: none !important;}
  .sp-block {display: block;}
  .pc-inline {display: none !important;}
  .sp-inline {display: inline;}
}