@charset "UTF-8";

/* フォントサイズ */
.machikado_interview main{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 20px;
}@media only screen and (max-width:600px) {
	.machikado_interview main{
		font-size: calc(100vw / 25);
	}
}@media only screen and (max-width:450px) {
	.machikado_interview main{
		font-size: 18px;
	}
}

/* フッターナビ非表示 */
div.footerNav{
    display: none;
}
footer{
	border-top: none;
}





/* ぶら下がり */
.hanging_indent{
	padding-left: 1em;
	text-indent: -1em;
}


/* ルビ */
[rubie], [rubie_near],[rubie_narrow], [rubie_indent]{
    position: relative;
	white-space: nowrap;
}
[rubie]::before {
    content: attr(rubie);
    position: absolute;
    font-size: .5em;
    top: -1em;
    left: -.5em;
    right: -.5em;
	white-space: nowrap;
	text-align: center;
}
[rubie_near]::before {
    content: attr(rubie_near);
    position: absolute;
    font-size: .5em;
    top: -.8em;
    left: -.5em;
    right: -.5em;
	white-space: nowrap;
	text-align: center;
}
[rubie_narrow]::before {
    content: attr(rubie_narrow);
    position: absolute;
    font-size: .5em;
    top: -1em;
    left: -.5em;
    right: -.5em;
	letter-spacing: 0.1em;
	white-space: nowrap;
	transform: scale(0.8, 1);
	text-indent: -1em;
}
[rubie_indent]::before {
    content: attr(rubie_indent);
    position: absolute;
    font-size: .5em;
    top: -1em;
    left: 1em;
    right: -.5em;
	padding-left: 1em;
	white-space: nowrap;
	text-align: center;
}


/* 背景 */
main.index_page, main.article_page{
	background-image: url("../images/interview_background.jpg");
	background-repeat: repeat;
}

/* トップKV */
.title_area {
	overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
	background-image: url("../images/topkeyvisual.jpg");
    display:flex;
	justify-content: center;
	align-items: center;
}
.index_page .title_area{
    background-position: center;
	height: 18em;
}
.article_page .title_area{
    background-position: top 73% center;
	height: 10em;
}
.index_page .title_area .image_box,
.article_page .title_area .image_box{ width: 25em;}
.title_area .image_box img{ width: 100%; }
@media only screen and (max-width:800px) {
	.article_page .title_area .image_box{ width: 22em; }
}
@media only screen and (max-width:600px){
	.index_page .title_area { height: 15em; }
	.article_page .title_area { height: 8.5em; }
	.index_page .title_area .image_box,
	.article_page .title_area .image_box{ width: 18em;}
}

/* 本体 */
.contents_area {
	width: calc(1200px - 2em);
	margin: 0 auto;
}@media only screen and (max-width:1200px){
	.contents_area{ width: calc(100vw - 2em); }
	/* ↑100vw：スクロールバー込みにしてリキッドっぽく */
}@media only screen and (max-width:600px) {
	.contents_area{ width: calc(1005 - 1em); }
}

/* トップページ：紹介文 */
.introduction_area{
	display: flex;
	justify-content: center;
	margin-top: 1.5em;
}
.introduction_box{
	position: relative;
	display: inline-block;
	padding: 1.5em 2.5em;
	background: #fffaf0;
	border: 2px dashed #8b4513;
	box-shadow: 0 0 0 .5em #fffaf0;	/* borderの外の塗り */
}
.introduction_box img {
	position: absolute;
	top: 3rem;;
	right: -5rem;
	width: 13rem;
}
.introduction_box h5{
	text-align: left;
	font-family: 'Zen Maru Gothic', sans-serif;
	font-size: 1em;	/* デフォルト値が0.83emなので再指定が必要 */
}
@media only screen and (max-width:1000px) {
	.introduction_box img{
		top: -8rem;
		right: -1.5rem;
	}
}
@media only screen and (max-width:780px) {
	.introduction_box {
		padding: 1em 1.5em;
		margin: 1em 0.5em;
	}
	.introduction_box img{
		top: -11rem;
	}
}
@media only screen and (max-width:700px) {
	.introduction_box {
		padding: 1em 1em;
	}
	.introduction_box img{
		width: 12rem;
	}
}
@media only screen and (max-width:600px) {
	.introduction_box img{
		width: 30vw;
		top: -30vw;
		right: -1rem;
	}
}

/* トップページ：目次タイトル：ハテナのきろく */
.menu_title {
    display: flex;
	justify-content: center;
	font-size: .9em;
    margin: 2em auto 3em;
}@media only screen and (max-width:600px) {
	.menu_title {
		margin: 1em auto 2.5em;
	}
}
.menu_title p {
	font-weight: 800;
	color: #ffffff;
    text-align: center;
    padding: 1em 3em;
	background-color: #C7AD01;
    border-radius: .25em;
}


/* トップページ：目次項目 */
.menu_area{
	margin-bottom: 2em;
}

ul.menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: auto;
	font-size: .8em;
	gap: 2.5em 1em;
	/*
	background-color: aqua;
	*/
}
.menu li {
	display: flex;
	align-items: center;
	/* ↑タイトルが１行でも２行でも天地中央揃えになるための指定↑ */
	position: relative;
	height: 5em;
	background-color: #ffffff;
	border-radius: 2.5em;
    box-shadow: .35em .35em 0 0 rgba(0, 0, 0, 0.2);
}
.menu_list p { /* 〜屋さんのハテナ */
	display: inline-block;
	position: absolute;
	top: -1.125em;
	left: 3.0em;
	padding: 0 .5em;
	background-color: #AEC715;
	font-weight: 600;
	color: #ffffff
}
.menu_list h4 { /* タイトル */
	font-size: 1.12em;
	text-align: left;
	font-weight: 700;
    line-height: 1.2em;
	/*
	background-color: aquamarine;
	*/
	margin: auto 4em auto 1.75em;
}
.menu_list h4.narrow{
	letter-spacing: -.1em;
}
.menu_list img {
	position: absolute;
	width: 4.4rem;
	height: 4.4rem;
	top: .1rem;
	right: .25rem;
	/*
	background-color: antiquewhite;
	*/
}@media (min-width: 451px) and (max-width: 600px) {
  .menu_list img {
        width: calc(352vw / 25);
        height: calc(352vw / 25);
        top:calc(8vw / 25);
        right: calc(20vw / 25);
	}
}
/* 1列：横幅いっぱい */
ul.menu, .menu li {	width: calc(100% - .5em); }
@media only screen and (min-width:600px) {
	ul.menu, .menu li { width: 30em; }
}
/* 2列 */
@media only screen and (min-width:680px) {
	ul.menu{  width: 100%; }
	.menu li{ width: calc(50% - .5em); }
}
@media only screen and (min-width:880px) {
	ul.menu{  width: calc(23.5em * 2 + 1em); }
	.menu li{ width: 23.5em; }
}
/* 3列 */
@media only screen and (min-width:1296px) {
	ul.menu{  width: calc(23.5em * 3 + 2em);	}
	.menu li{ width: 23.5em; }
}

/* 記事ページ：ヘッダー */
.article_page .title_area {
 	display: flex;
	text-align: center;
	overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top 73% center;
	background-image: url("../images/topkeyvisual.jpg");
    justify-content: center;
    align-items: center;
    flex-direction: column;
	height: 10em;
}
@media only screen and (max-width:600px) {
	.article_page .title_area {
		height: 6em;
	}
}
.article_page .title_area img {
	width: 50%;
	padding:1em 0;
}
@media only screen and (max-width:800px) {
	.article_page .title_area img {
		width: 75vw;
	}
}

/* 記事ページ：本体 */
.article_area{
	box-sizing: border-box;
	display: block;
	width: 100%;
	font-size: .9em;
	margin-top: 1.25em;
	border-radius: 2.5em;
	background-color: #ffffff;
	padding: 1.5em 2em;
}@media only screen and (max-width:800px) {
	.article_area{ padding: 1em 1.5em; }
}@media only screen and (max-width:600px) {
	.article_area{ padding: .5em 1em; }
}

/* 記事ページ：タイトル */
.article_title {
    display: inline-block;
    padding: 1em 2em;
	background-color: #AEC715;
    border-color: #AEC715;
	border-radius: 2em;
	box-shadow: .5em .5em .75em #ccc;
	margin-bottom: 2em;
	margin-left: -.5em;
}@media only screen and (max-width:800px) {
	.article_title{ margin-left: 0; }
}@media only screen and (max-width:600px) {
	.article_title{
		width: calc(100% - 2em - 2em);
		margin-top: 0.5em;
	}
}
.article_title h2{
	font-weight: 900;
	font-size: 1.2em;
	line-height: 1;
	color: #ffffff
}
@media only screen and (max-width:600px) {
	.article_title.tall h2{
		line-height: 1.3;
	}
}

/* 記事ページ：本文 */
.article_area p{
	font-size: 1em;
	line-height: 2;
}

/* 配置：これはちょっとちがうなあ */
.text_area{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2em;
	margin: 0 2em 1.5em 2em;
	/*
	margin-bottom: 1.5em;
	padding: 0 2em;
	*/
}@media only screen and (max-width:600px) {
	.text_area{
		width: calc(100% - 1em);
		margin: 0 auto 1.5em;
	}
}
.text_area img{ width: 100%; }

.image_right{
	display: inline-block;
	float: right;
}

.machikado_interview .text_area figcaption{
	text-align: right;
	font-weight: 500;
	font-size: 0.8em;
}

/* 画像＆テキスト型２段組 */
.full_col{ width:calc(100%); }
.half_col{ width:calc( (100% - 2em) / 2);}
.twenty_col{ width:calc( (100% - 2em) * 0.2);}
.thirty_col{ width:calc( (100% - 2em) * 0.3);}
.forty_col{ width:calc( (100% - 2em) * 0.4);}
.sixty_col{ width:calc( (100% - 2em) * 0.6);}
.seventy_col{ width:calc( (100% - 2em) * 0.7);}
.eighty_col{ width:calc( (100% - 2em) * 0.8);}

/* 画像が８はなし。1000+18*2+112↓ */
@media only screen and (max-width:1146px) {
    .half_col.pic{ width: 500px; }
    .twenty_col.pic{ width: 200px;}
    .thirty_col.pic{ width: 300px;}
    .forty_col.pic{ width: 400px;}
    .sixty_col.pic{ width: 600px;}
    .seventy_col.pic{ width: 700px;}
    .half_col.text{ width:calc((100% - 2em) - 500px); min-width:14em; }
    .thirty_col.text{ width:calc((100% - 2em) - 700px); min-width:14em;}
    .forty_col.text{ width:calc((100% - 2em) - 600px); min-width:14em;}
    .sixty_col.text{ width:calc((100% - 2em) - 400px); min-width:14em;}
    .seventy_col.text{ width:calc((100% - 2em) - 300px); min-width:14em;}
    .eighty_col.text{ width:calc((100% - 2em) - 200px); min-width:14em;}
}
/*
*/
@media only screen and (max-width:1146px) {
	.thirty_col.text{ width: 100%;}
	.seventy_col.pic{ min-width: 80%;} /* 約700/915 */
}
@media only screen and (max-width:1071px) {
	.forty_col.text{ width: 100%;}
	.sixty_col.pic{ min-width: 75%;}
}
@media only screen and (max-width:971px) {
	.half_col.text{ width: 100%;}
	.half_col.pic{ min-width: 75%; }
}
@media only screen and (max-width:871px) {
	.sixty_col.text{ width: 100%;}
	.forty_col.pic{ min-width: 70%;}
}
@media only screen and (max-width:753px) {
	.seventy_col.text{ width: 100%;}
	.thirty_col.pic{ min-width: 70%;}
}
@media only screen and (max-width:653px) {
	.eighty_col.text{ width: 100%;}
	.twenty_col.pic{ min-width: 70%;}
}


/* ずっと等分 */
.third_col{ width:calc( (100% - 2 * 2em) / 3);}
.fourth_col{ width:calc( (100% - 3 * 2em) / 4);}
.fifth_col{ width:calc( (100% - 4 * 2em) / 5);}

/* 小見出し */
.article_area h3{
	margin: 1em 0;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 0.6em; /* 線の太さ */
    text-decoration-color: rgba(255, 228, 0, 0.3); /* 線の色 */
    text-underline-offset: -0.5em; /* 線の位置。テキストに重なるようにやや上部にする */
    text-decoration-skip-ink: none;
}

/*
@media only screen and (max-width:600px) {
	.article_title h2 {
		font-size: 20px;
	}
}
*/


/* 会話の吹き出し：途中です */
.balloon_area{
	margin: 0 auto;
	/*
	background-color: aqua;
	*/
}
@media only screen and (min-width:881px) {
	.balloon_area{
		width: calc(100% - 2em);
	}
}
.balloon{
    display: flex;
    align-items: flex-start;
    gap: 0 1em;
	margin-bottom: 1em;
	/*
	background-color: greenyellow;
	*/
	padding: 0;
	position: relative;
}
.balloon.right,.balloon.right_pink{
	flex-direction: row-reverse;
}
.balloon figure{ width: 4em; }
@media only screen and (max-width:600px) {
	.balloon figure{ }
	.balloon.left figure{ width: 3.5em; margin-left: -.5em; }
	.balloon.right figure{ width: 3.5em; margin-right: -.5em; }
}

/* ↑右寄せのとき、figureとかdivタグだと少しはみ出る。 剥き出しのimgタグならはみ出ない　どういうこと？ */



.balloon figure img {
	width: 100%;
    border: 3px solid #f5f5f5;
    border-radius: 50%;
	box-sizing: border-box;
}
.balloon figcaption{
	padding: 0;
	font-size: .5em;
	text-align: center;
	margin-top: .5em;
	line-height: 1;
	/*
	background-color: red;
	*/
}
.balloon .talks{
    position: relative;
    max-width: 33em;
	/*
	display: inline-block;
	width: auto;
	flex: 1;
    margin: 0 0 1em;
	*/
    padding: .8em 1em;
    border-radius: .9em;
    background-color: #f5f5f5;
    color: #333333;
}@media only screen and (max-width:900px) {
	.balloon .talks{ max-width:calc(100% - 9em); }
}@media only screen and (max-width:600px) {
	.balloon .talks{ max-width:calc(100% - 6em); }
}
.balloon.left .talks::before {
    content: '';
    position: absolute;
    left: -.8em;
    width: .8em;
    height: 1em;
    background-color: #f5f5f5;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.balloon.right img {
    border-color: #fff2d5;
	background-color: rgba(255,255,255,0);
}
.balloon.right .talks {
    background-color: #fff2d5;
}
.balloon.right .talks::before {
    content: '';
    position: absolute;
    right: -.8em;
    width: .8em;
    height: 1em;
    background-color: #fff2d5;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ピンク吹き出し */
.balloon.right_pink img {
    border-color: #F8E0E1;
	background-color: rgba(255,255,255,.5);
}
.balloon.right_pink .talks {
    background-color: #F8E0E1;
}
.balloon.right_pink .talks::before {
    content: '';
    position: absolute;
    right: -.8em;
    width: .8em;
    height: 1em;
    background-color: #F8E0E1;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* 吹き出し内画像 */
.balloon .talks img{
	max-width: 100%;
	display: block;
	margin: 0 auto;
}
@media only screen and (min-width:601px) {
    .balloon .talks img.sp{
        display: none;
    }
}@media only screen and (max-width:600px) {
    .balloon .talks img.pc_tb{
        display: none;
    }
}
@media only screen and (min-width:1025px) {
    .balloon .talks img.sp{
        display: none;
    }
    .balloon .talks img.tb_sp{
        display: none;
    }
}@media only screen and (max-width:1024px) {
    .balloon .talks img.pc{
        display: none;
    }
}

/* 手順ul */
.ringed_paper{
	width:calc(100% - 16em);
	min-width: 80%;
	margin: 1.5em auto;
	background-color:#f8ffff;
	padding: 2em 2em 0;
	box-shadow: 1px 1px 4px #999;
	background-image: url("../images/ring_note.png");
	background-size: 2em;
	background-repeat: repeat-y;
    line-height: 2; /* 文字の高さ：javascriptが拾いにくる */
}
.process_list{
	display: flex;
	gap: 0em 1em;
	align-items: flex-start;
	
	/*
	box-sizing: content-box;
	/**/
    background: linear-gradient(180deg, #ccc 0%, #ccc 1px, transparent 1px, transparent 100%);/* 罫線の色と太さ  */
    background-size: 100% 2em; /* 行の高さ */
	/*
	border-top: solid 1px #ddd;
	/*
	background: linear-gradient(to top,rgba(221,221,221,1) 1px, rgba(255,255,255,0) 1px) left top / 1px 2em; /* カラーコードで指定するとIEで罫線が出ない */
	/*
    line-height: 2; /* 文字の高さ */
	/*
    padding-bottom: 1.75em; /* 最終行の下にも罫線を引く textのパディング.25emと合わせて2em */
    padding-bottom: 1.70em; /* 最終行の下にも罫線を引く 少し狭くしておく */
}
.process_list.columnwise{
	flex-direction: column;
}
/*
.process_list:nth-child(2n+1){
	display: flex;
	gap: 0em 1em;
	align-items: flex-start;

	background: linear-gradient(180deg, #f00 0%, #ccc 1px, transparent 1px, transparent 100%);/* 罫線の色と太さ  
    background-size: 100% 2em; /* 行の高さ 
    line-height: 2; /* 文字の高さ 
    padding-bottom: 1.75em; /* 最終行の下にも罫線を引く 
}
.process_list:last-child{
	padding-bottom: 2em;
}
/*
.process_list .fit_line{ max-width: 100%;}
*/
.process_list .text{
	flex: 1;
	min-width: 12em;
	margin-top: .25em;
	/*
	background-color: rgba(0,255,255,.2);
	*/
}
.process_list img{
	width: 100%;
}
/*.process_list.wrap{
	flex-wrap: wrap
}

.fit_line:nth-child(2n+1){
	background-color: aqua;
}
.fit_line{
	background-color: rgba(0,255,0,.2);
}
.process_list:nth-child(2n+1){
	background-color: rgba(255,255,0,.2);
    background: linear-gradient(180deg, #000 0%, #000 1px, transparent 1px, transparent 100%);/* 罫線の色と太さ  
    background-size: 100% 2em; /* 行の高さ
}
.process_list:nth-child(2n+2){
	background-color: rgba(255,0,0,.2);
}
*/

.process_list > .text + .fit_line{
    margin-top: -.25em;
    margin-bottom: .25em;
}
@media only screen and (max-width:880px) {
	.ringed_paper{
		width: calc(100% - 4em);
	}
}
@media only screen and (max-width:600px) {
	.ringed_paper{
		width: calc(100% - 3em);
		padding-right: 1em;
	}
	.process_area{
		width: 100%;
	}
	.process_list{
		/*
		flex-direction:  row-reverse;
		align-items: center;
		*/
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		/*
		gap:.125em;

		margin-top: 2em;
		*/
		padding-bottom: 0;
		margin-bottom: 1.7em;
	}
	/*
	.process_list img{
		width: auto;
	}
	.process_list .fit_line{
		width: 100%;
		height: 10em;
	}
	*/ 
	.process_list > .text + .fit_line{
		margin-top: -.25em;
		margin-bottom: .25em;
	}
	/* */
}
.text_green {
	font-weight: 800;
	color: #ffffff;
	background-color: #AEC715;
	margin-right: 0.3em;
}
.list_green {
	list-style: none;
}
.list_green li {
	position: relative;
	padding-left: 18px;
	line-height: 1.9;
	top: .2em;
}
.list_green li::before {
  content: '';
	display: inline-block;
	position: absolute;
	top: 12px;
	left: 0;
	width: 10px;
	height: 10px;
	background-color: #AEC715;
	border-radius: 5px;
}
.indent-1 li{
	list-style-type: none;
	text-indent: -1em;
	padding-left: 1em;
	line-height: 1.9em;
}

/* 参考囲み枠 */
.ref_box {
    position: relative;
    margin: 1em 3em;
    padding: 25px 10px 7px;
    border: solid 2px #8b4513;
}
@media only screen and (max-width:600px) {
	.ref_box{
		margin: 1em;
	}
}.ref_box .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #8b4513;
    color: #ffffff;
    font-weight: bold;
}
.ref_box p {
    margin: 0; 
    padding: 0.5em;
	font-size: 0.9em;
}
.ref_box a{
	text-decoration: underline;
}

/* 更新日付 */
.date_area {
	text-align: right;
}
@media only screen and (max-width:600px) {
	.date_area{
		margin: 1em;
	}
}
.source_note{
	font-size: 0.7em;
}
@media only screen and (max-width:600px) {
	.source_note{
		text-align: left;
	}
}

/* アウトロエリア・戻るボタン */
.outro_area {
	text-align: center;
}
.btn_back {
	display: inline-block;
    margin: 1.5rem auto 2.5rem;
	text-align: center;
    padding: 1rem 4rem;
	background-color: #C7AD01;
    border-radius: 3px;
    box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width:600px) {
	.btn_back{
		padding: 1rem 1.5rem;
	}
}

.btn_back:hover {
	background-color: #c7b228;
}
.btn_back a {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-weight: 800;
	font-size: 18px;
	color: #ffffff;
}
@media only screen and (max-width:600px) {
	.btn_back a {
		font-size: 16px;
	}
}

.img_width80{
	width: 80%;
}

/* 画像個別調整 */

#tofu_sumasiko{
	width: 50%;
    border-radius: 50%;
	box-sizing: border-box;
	margin: 1em auto;
}
#sumasiko_comparison{
	width: 60%;
}
#sumasiko_prexipitation{
	width: 40%;
}
#vinegar{
	width: 20%;
}
#heron_structure{
	width: 70%;
}
#petbottle_water{
	width: 60%;
}
#petbottle_fountain{
	width: 80%;
}
@media only screen and (max-width:900px) {
	#heron_structure{
		width: 90%;
	}
}

@media only screen and (min-width:700px) {	
	#park_ichou{
		margin: 0 auto;
		width: 75%;
	}
}
@media only screen and (max-width:600px) {
	#petbottle_fountain{
		width: 100%;
	}
	#grape_juice{
		width: 90%;
	}
	#camouflage_green, #camouflage_brown, #onbu_couple,#kobaneinago, #ibobatta, #syouryoubatta,#belemnite, #umiyuri,#belemnite, #belemnite_point, #park_metasequoia{
		width: 80%;
	}
	#vinegar{
		width: 35%;
	}
	#sumasiko_comparison{
		width: 50vw;
	}
	#petbottle_water{
		width: 70%;
	}
	#heron_structure{
		width: 100%;
	}
}