/* IMPORT RESET ================================================== */
@import url("sanitize.css");

/* WEB FONT ====================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css");

/* 変数設定 ======================================================== */

/* 共通のサイズや色を変数で設定 */
:root {
	/* コンテンツの最大幅 */
	--contents-wide: 960px;
	/* flexboxの子要素の間隔 */
	--spacing: 20px;
	/* 文字サイズ */
	--small: 1.2rem;/*75%*/
	--medium: 1.6rem;/*100%*/
	--large: 2rem;/*125%*/
	--x-large: 2.4rem;/*150%*/
	/* 色 */
	--red: #cc0000;
	--blue: #003399;
	--mallcolor: #b60081;
}

/* STYLES ======================================================== */

/* ルートのフォントサイズを10pxに設定（1rem=10px）*/
html {
	font-size: 62.5%;
}

/* bodyのフォントサイズはfont-m（16px=1.6rem）と同じ */
body {
	font-size: var(--medium);
}

/* MEMO ++++++++++++++++++++++++++++++++
フォントサイズはremで指定すること
（例）10pxは1rem、12pxは1.2rem
+++++++++++++++++++++++++++++++++++++ */

.font-s {
	font-size: var(--small);
}

.font-m {
	font-size: var(--medium);
}

.font-l {
	font-size: var(--large);
}

.font-xl {
	font-size: var(--x-large);
}

/* 文字色 */
.font-red {
	color: var(--red);
}

.font-blue {
	color: var(--blue);
}

.font-mcolor {
	color: var(--mallcolor);
}


* {
	box-sizing: border-box;
}

body {
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	margin: 0;
	padding: 0;
	background: #C97BB1;
}

:is(header, main) {
  margin: 0 auto;
  max-width: var(--contents-wide);
	background: #113d60;
}
:is(main, footer) {
	@media (max-width: 1000px) {
		/* mainのmax-widthよりウィンドウ幅が狭くなった時にコンテンツとウィンドウが接しないように設定
		@mediaのmax-widthと下記paddingはサイトコンテンツのmax-widthに合わせて調整 */
		padding: 10px;
	}
}

footer{
	text-align: center;
	padding: 1em 0;
  margin: 0 auto;
  max-width: var(--contents-wide);
	background: #fff;
}

main section{
	border: 1px solid #113d60;
}

h1{
	margin: 0;
}

img {
	/* 画像は基本的に横幅100%表示、高さは横幅に合わせて自動調整
	小さい画像を使用する際は個別にmax-widthを設定する */
	width: 100%;
	height: auto;
	vertical-align: bottom;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}

/* Flexbox ────────────────────────────────────────────────────────────
子要素の間隔はgapで指定。
*/

.flexbox {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: var(--spacing);
	gap: var(--spacing);
}

/* 子要素のボックスを等分配置 */
/* PC2列、スマホ1列 */
.flexbox.box2-1 {
	> * {
		width: 100%;
	}
	@media (min-width: 768px){
	/* PCのみ適用 */
		> * {
			width: calc((100% - var(--spacing)) / 2); 
		}
	}
}


/* 子要素のボックスサイズの個別指定
スマホで縦に並べる場合は親要素をclass="flexbox spCancel"とする */
.flexbox {
	.box25 {
		width: calc((100% - var(--spacing)) * 1 / 4);
	}
	.box75 {
		width: calc((100% - var(--spacing)) * 3 / 4);
	}
	
	.box30 {
		width: calc((100% - var(--spacing)) * 3 / 10);
	}
	.box70 {
		width: calc((100% - var(--spacing)) * 7 / 10);
	}
	
	.box40 {
		width: calc((100% - var(--spacing)) * 4 / 10);
	}
	.box60 {
		width: calc((100% - var(--spacing)) * 6 / 10);
	}
	@media (max-width: 768px) {
		/* スマホでは1列に並べる場合 */
		.spCancel > * {
			width: 100%;
		}
	}
}
/* ページトップスクロール ────────────────────────────────────────────────── */
#page-top {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 10;
}

.top-btn {
	display: block;
	background: #000;
	color: #fff;
	width: 50px;
	height: 50px;
	text-align: center;
	box-shadow: 0 0 0 3px #000;/* ボタンの背景色に合わせる */
	border: 1px solid #fff;
	text-decoration: none;
	
	/*マウスオーバーした時*/
	@media (hover: hover) {
		/* hover指定できるPCを想定したスタイル */
		&:hover {
			background: #666;
			box-shadow: 0 0 0 3px #666;/* ボタンの背景色に合わせる */
		}
	}
	@media (hover: none) {
		/* hoverが使えないタッチ端末を想定した装飾 */
		&:active {
			background: #666;
			box-shadow: 0 0 0 3px #666;/* ボタンの背景色に合わせる */
		}
	}
	
	i {
		padding-top: 5px;
		font-size: var(--large);
		display: block;
	}
	span {
		display: block;
		font-size: var(--small);
		margin-top: -2px;
	}
}

/* ▲ページトップスクロールここまで▲ */

/* スマホなど幅が足りなくなったらspanで囲った単位で強制改行
   spanで囲まれている文章は自動改行がされなくなるので要注意 */
.sp-br span {
  display: inline-block;
  white-space: nowrap;
}

/*見出し*/
h2.semicircle{
	font-size: var(--large);
	background: #e8ba1f;
	color: #ffffff;
	width: 12em;
	height: 4em;
	border-radius:50% 50% 0 0/100% 100% 0 0;
	display: grid;
	place-items: center;
	margin: 0 auto;
}

h3{
	background: #545c9b;
	color: #ffffff;
	border-radius: 9999px;
	font-size: var(--medium);
	padding: 0.1em 1em;
	text-align: center;
}

nav{
	width: 24em;
	margin: 2em auto 0;
	padding: 5px;
	background: #fff;
	border-radius: 9999px;
	text-align: center;
	@media (max-width: 768px) {
		/*スマホ*/
		width: 90%;
	}
	a{
		color: #333;
		text-decoration: none;
		margin: 0 0.5em;
		&:hover{
			font-weight: bold;
			color: #b74b97;
		}
	}
	
	i{
		margin-right: 0.3em;
	}
}

/*概要説明*/
article.outline{
	width: fit-content;
	background: #f3e7f2;
	border-radius: 10px;
	padding: 1em;
	margin: 2em auto;
	h2{
		font-size: var(--large);
		color: #b74b97;
		text-align: center;
		margin-top: 0;
	}
}

/*コンテンツボックス（記事背景）*/
.content-box{
	background: #ffffff;
	padding: 1em;
	border-radius: 10px;
	margin: -1em 10px 2em 10px;
}
/*料金表*/
table.price{
	border-collapse: separate;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	max-width: 650px;
	table-layout: fixed;
	
	thead th{
		background: #b74b97;
		color: #ffffff;
		text-align: center;
	}
	
	tbody{
		th{
			background: #c36faa;
			color: #ffffff;
			text-align: center;
		}
		td{
			font-size: var(--x-large);
			font-weight: bold;
			text-align: center;
			background: #f3e7f2;
			color: #b74b97;
		}
	}
}

/*注釈*/
ul.annotation {
  list-style: none;
  padding: 0;
	
	li {
		display: flex;
		
		&::before {
			content: "※";
			margin-right: .25em;
		}
	}
}

/*注意書き*/
.caution {
	display: flex;
	grid-gap: 0 .7em;
	margin: 0 auto;
	padding: 1em;
	border-radius: 5px;
	background-color: #ffebee;
	color: #333333;
	
	&::before {
		width: 24px;
    height: 24px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23f06060'%3E%3C/path%3E%3C/svg%3E");
		
		@media (max-width: 768px) {
			/*スマホ*/
			width: 48px;
			height: 48px;
		}
	}
	
	p {
		margin: 0;
    padding: 0 0 0 .7em;
    border-left: 1px solid #f06060;
	}
}

/*お問い合わせ*/
#inquiry{
	width: fit-content;
	margin: 0 auto;
	padding: 10px;
	h2{
		display: grid;
		place-items: center;
		margin-bottom: 0;
		aspect-ratio: 1;
		border-radius: 9999px;
		background: #F06060;
		color: #fff;
		font-size: var(--medium);
		font-weight: normal;
		text-align: center;
		line-height: 1.2;
	}
	.flexbox > div{
		@media (min-width: 767px) {
			white-space: nowrap;
		}
	}
}