@charset "utf-8";

/* 全体の設定
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
	font-family: 'Noto Sans JP', sans-serif;
	margin: 0;
	word-wrap: break-word;
	overflow-x: hidden;
}

html {scroll-behavior: smooth;}

section {padding: clamp(3rem,6.5vw,5rem) 1rem;}

.m-plus {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-style: normal;
}

.noto-serif{
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
}


/* ROOT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
	/* Color */
	--main-color: #8c6239;
	--sub-color_01: #333;
	
	--blue: #7dcdf5;
	--dark-blue: #00A0E9;
	--navy: #1d50a2;
	--green: #004c4a;
	--light-yellow: #f4f1df;
	--yellow: #e1b80d;
	--light-orange: #ED945D;
	--orange: #E35F0D;
	--vermilion: #dc503c;
	--red: #E60012;
	--light-gray: #D1D5D9;
	--gray: #8B8C90;
	--dark-gray: #666666;
	--deep-dark-gray: #333;
	--white: #fff;
	--black: #000;
	
	/* 角丸 */
	--rounded-5-10: clamp(5px, 3vw, 10px);
	--rounded-10-25: clamp(10px, 3.5vw, 25px);
	--rounded-200: 200px;

}


/* 基本CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
    display: inline-block;
    text-decoration-line: none;
	color: inherit;
}

a:hover,a img:hover {
    color: inherit;
    opacity: 0.8;
}

p{
	line-height: 1.6em;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

li {text-decoration: none;}

table {width: 100%; border-collapse: collapse;}
table :is(th,td) {padding: 1.5rem .5rem;}
table th {width: 30%;}
table p {margin: 0;}

/*input {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}*/

button {
	background: none;
    border: none;
}

/* フォント */
.font-montserrat {
  font-family: "Montserrat", sans-serif;
}
.font-roboto {
  font-family: "Roboto", sans-serif;
}
.font-yuji-boku {
  font-family: "Yuji Boku", serif;
}

@media screen and (max-width: 960px) {
	table.table960 :is(th,td) {display: block; width: 100%;}
	table.table960 th {padding-bottom: 0;}
	table.table960 td {padding-top: .5rem;}
}
@media screen and (max-width: 768px) {
	table.table768 :is(th,td) {display: block; width: 100%;}
	table.table768 th {padding-bottom: 0;}
	table.table768 td {padding-top: .5rem;}
}
@media screen and (max-width: 560px) {
	table.table560 :is(th,td) {display: block; width: 100%;}
	table.table560 th {padding-bottom: 0;}
	table.table560 td {padding-top: .5rem;}
}


/* 汎用コンテンツ
-------------------------------------*/
/* 必要なパーツをここに貼り付けて使ってください */

/* マップリンクボタン(角丸線+後三角) */
.link-btn__round-border {
	display: inline-flex;
    align-items: center;
	border: 1px solid var(--main-color);
    padding: .2rem .5rem;
    border-radius: 100px;
    margin-bottom: 1rem;
}
[class*="link-btn__"]::after {
	content: "";
}
.link-btn__round-border::after {
	display: inline-block;
	width: 8px;
	height: 10px;
	background-color: var(--main-color);
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	margin-left: .2rem;
}

/* くの字矢印付角丸ボタン */
.link-btn__round-arrow {
	display: inline-flex;
	align-items: center;
	background-color: var(--sub-color_01);
	border-radius: 100px;
	min-width: 140px;
    padding: .25rem .75rem;
    margin: .5rem auto;
	position: relative;
	transition: background-color .3s, color .3s;
}
.link-btn__round-arrow:hover {
	background-color: var(--black);
	color: var(--white);
}
.link-btn__round-arrow::before,
.link-btn__round-arrow::after {
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	right: 8px;
	display: inline-block;
	width: 8px;
	height: 2px;
	border-radius: 100px;
	background-color: var(--black);
	transform-origin: calc(100% - 1px) 50%;
	transition: background-color .3s;
}
.link-btn__round-arrow::before {
	transform: rotate(45deg);
}
.link-btn__round-arrow::after {
	transform: rotate(-45deg);
}
.link-btn__round-arrow:hover::before,
.link-btn__round-arrow:hover::after {
	background-color: var(--white);
}

/* リンクボタン(角丸+丸+矢印) */
/* .link-btn__round-btn > span(テキスト) + span.link-btn__round-btn__inside-circle でお使いください… */
.link-btn__round-btn {
	display: inline-flex;
    align-items: center;
	justify-content: space-between;
	background-color: var(--sub-color_01);
	border: 1px solid var(--sub-color_01);
    max-width: 100%;
    width: clamp(220px, 21.5vw, 280px);
    min-height: 65px;
    border-radius: 100px;
    margin-bottom: 1rem;
	color: var(--white);
	font-size: clamp(18px, 2vw, 20px);
	font-weight: 500;
    transition: all 0.3s;
}
.link-btn__round-btn span:not([class]) {
	display: block;
    width: calc(100% - clamp(68px, 7vw, 88px));
    text-align: center;
    margin-left: 20px;
}
span.link-btn__round-btn__inside-circle {
	position: relative;
	width: clamp(28px,4vw,38px);
	height: clamp(28px,4vw,38px);
	background-color: var(--white);
	border-radius: 50%;
	margin: 0 14px;
}
span.link-btn__round-btn__inside-circle::after {
	display: inline-block;
	position: absolute;
	left: 56%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 12px;
	height: 14px;
	background-color: var(--sub-color_01);
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	transition: all 0.3s;
}
.link-btn__round-btn:hover {
	opacity: 1;
	background-color: var(--white);
	color: var(--sub-color_01);
}
.link-btn__round-btn:hover span.link-btn__round-btn__inside-circle {
	background-color: var(--sub-color_01);
}
.link-btn__round-btn:hover span.link-btn__round-btn__inside-circle::after {
	background-color: var(--white);
}