body {
    background: #fff;
    color: var(--color-txt);
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    margin: 0;
    letter-spacing: 0.4px;
}

:root {
    --sp-header-height: 60px;
    --pc-header-height: 90px;
    --font-size-small: 2.4vw;
    --font-size-base: 3.65vw;
    --font-size-h3: 3.9vw;
    --font-size-h2: 3.9vw;
    --font-size-h1: 4.3vw;
    --pc-font-size-small: 12px;
    --pc-font-size-base: 15px;
    --pc-font-size-h3: 18px;
    --pc-font-size-h2: 18px;
    --pc-font-size-h1: 26px;
    --color-txt: black;
    --color-txt-light: #999;
    --color-main: #f05d97;
    --color-main-bg: #ffeaeb;
    --color-light-bg: #fff;
    --color-marker: #ffdff1;
    --color-border: #c5c5ca;
	--color-gray: #f5f5fa;
    --radius-lg: 40px;
    --radius-md: 100px;
    --radius-sm: 20px;
}

a,a:hover,a:visited{
	color: inherit;
	text-decoration: none;
}

.space-50{
	margin-top:30px;
}

img{
	max-width:100%;
}

.font-red{
	color: #FF74BA;
}

.font-small{
font-weight:400;
font-size:60%;	
}

mark{
	 background-color: #FFDEEF;
}

.font-rmark{
	font-size:70%;	
vertical-align:30%;
}

.annotation{
margin-top:10px;
font-size:14px;	
}

.read-pr{
	margin:0;
	padding:0;
	text-align:right!important;
	font-size:14px;
	color: #949494;
}

h1{
	margin-top:50px;
	font-weight:400;
	text-align:center;
}

.h2nomal{
font-weight:400;
  padding: 0.6em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #FFECEC;/*背景色*/
	border-left: solid 10px #FF74BA;/*左線（実線 太さ 色）*/
	margin-bottom:50px;
}

.question{
	font-weight:400;
	margin-left:35px;
	font-size:18px;
}

.question:before{
    font-family: Inter;
    content: "Q";
    font-weight: bold;
    font-size: 200%;
    color: #FF74BA;
    margin-left: -35px;
    margin-top: -13px;
    position: absolute;
}

.answer{
	font-weight:400;
	margin-left:35px;
	margin-top: 30px;
	margin-bottom: 30px;
	font-size:18px;
	color: #D9D9D9;
}

.answer:before{
    font-family: Inter;
    content: "A";
    font-weight: bold;
    font-size: 200%;
    color: #5ADBFF;
    margin-left: -35px;
    margin-top: -25px;
    position: absolute;
}


.check-mark{
	font-weight:400;
	margin-left:30px;
	margin-top:20px;
}

.check-mark:before{
	content: url("img/check.png");
	margin-left:-30px;
	position: absolute;
	vertical-align:center;
}

.red-circle{
	font-weight:400;
	margin-left:30px;
	margin-top:20px;
}

.red-circle:before{
	content: url("img/circle.svg");
	margin-left: -28px;
    margin-top: 3px;
	position: absolute;
}

.red-pencil{
	font-weight:400;
	margin-left:30px;
	margin-top:20px;
}

.red-pencil:before{
	content: url("img/pencil.svg");
	margin-left: -30px;
	position: absolute;
}

.chapter-list2 {
    counter-reset: number;
    list-style-type: none;
    margin-block: 0;
    padding: 0;
}

.chapter-list2 li:before {
    color: #E00272;
    counter-increment: number;
    content: "●";
    font-size: 105%;
    font-weight: bold;
    margin-right: 0.6em;
}

.chapter-list2 li {
    line-height: 1.5;
	padding: 1em 0.25em 1em 2em;
	font-size: 15px;
    text-indent: -2em;
    color: #000000;
}

.chapter-list2 li:not(:last-child) {
    border-bottom: #B5B5B5 solid 1px;
}

.list-title{
	margin:30px 0px 10px 0px!important;
}

.point-list{
	margin-bottom:50px;
}

.point-list li{
	margin-bottom:10px;
}

.ok-link{
	text-decoration:underline;
}

.head-title{
	text-align: center;
	font-size: 25px;
	font-weight:bold;
}

@media screen and (min-width: 768px) {
    .container {
        max-width: 700px;
        margin: 0 auto;
}
	
.read-container {
        max-width: 700px;
        margin: 0 auto;
}

.writer-photo {
    flex: 0 0 20%!important;
}


}


@media screen and (max-width: 640px) {
.br-mb{
	display:none;
	}
	
	h1{
		font-size: 6vw;
		font-weight:bold;
	}
	
}

.read-container {
	padding-inline: var(--sp-side-padding);
	margin-bottom:50px;
}

.read-container p {
	font-family: Noto Sans JP;
	font-weight:350;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
	unicode-bidi: isolate;
	text-align: justify; 
	line-height: 30px;
	margin-bottom:50px;
}

.container {
	padding-inline: var(--sp-side-padding);
	margin-bottom:50px;
}

.container p {
	font-family: Noto Sans JP;
	font-weight:350;
    display: block;
	unicode-bidi: isolate;
	text-align: justify; 
	line-height: 30px;
	margin-bottom:50px;
}

/* 目次 */

.chapter {
    border: #B5B5B5 solid;
    margin: 2rem 1rem;
    padding: 2rem;
    position: relative;
}

.chapter-list {
    counter-reset: number;
    list-style-type: none;
    margin-block: 0;
    padding: 0;
}

.chapter-list-head {
	color: #E00272;
    font-weight: bold;
    letter-spacing: 0.5em;
    line-height: 1;
    margin-bottom: 0.5em;
}

.chapter-list ul {
  padding-left: 20px;
  list-style-type: disc;
  list-style-position: outside;
}

.chapter-list li:not(:last-child) {
    border-bottom: #B5B5B5 solid 1px;
}

.chapter-list li {
    line-height: 1.5;
    padding: 1em 0.25em 1em 2em;
	text-indent: -2em;
	color: #000000;
}

.chapter-list li::before {
    color: #E00272;
    counter-increment: number;
    content: counter(number) '.';
    content: counter(number, decimal-leading-zero);
    font-size: 105%;
    font-weight: bold;
    margin-right: 0.6em;
}

/* 人物紹介 */

.greeting {
	margin: 2rem 1rem;
	background: #F5F5F5;
    padding: 1em 0;
}

.writer {
    display: flex;
	align-items: center;
	padding-right:2rem;
	margin: 20px 0;
}

.writer-photo {
	flex: 0 0 15%;
	margin: 0 25px;
}

.writer-photo img {
    border-radius: 9999px;
    display: block;
    width: 100%;
}


.writer-txt {
	flex: 0 1 auto;
	font-size: 12px;
    text-align: justify;
}

.writer-name {
	font-weight:700;
	line-height: 1.75;
	margin-bottom:5px;
}

.writer-message {
    line-height: 1.75;
}

figure {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 1em;
    margin-inline-start: 25px;
    margin-inline-end: 25px;
    unicode-bidi: isolate;
}


/* 吹き出し */
.speechBubble{
	margin: 2rem 1rem;
    padding: 1em 0;
}

.speechBubble-r {
  position: relative;
  margin-right: 20px;
  padding: 16px;
  border: 1px solid #000000;
  border-radius: 8px;
  background-color: #ffffff;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  color: #000000;
}

.speechBubble-r::before {
  content: "";
  position: absolute;
  top: 30px;
  right: 0;
  border-style: solid;
  border-width: 0 0 20px 20px;
  border-color: transparent transparent transparent #000000;
  translate: 100% -50%;
}

.speechBubble-r::after {
  content: "";
  position: absolute;
  top: 30px;
  right: 0;
  border-style: solid;
  border-width: 0 0 17.6px 17.6px;
  border-color: transparent transparent transparent #ffffff;
  translate: 100% calc(-50% - 0.2px);
}

.speechBubble-l {
  position: relative;
  margin-left: 20px;
  padding: 16px;
  border: 1px solid #000000;
  border-radius: 8px;
  background-color: #ffffff;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  color: #000000;
}

.speechBubble-l::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent #000000 transparent transparent;
  translate: -100% -50%;
}

.speechBubble-l::after {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  border-style: solid;
  border-width: 0 17.6px 17.6px 0;
  border-color: transparent #ffffff transparent transparent;
  translate: -100% calc(-50% - 0.2px);
}

.speechBubble-txt {
	display: table-cell;
    vertical-align: top;
    padding-top: 30px;
  width:83%;
	margin-top:30px;
    flex: 0 1 auto;
    text-align: justify;
}

.dialogue{
	clear: both;
	margin: 30px 0;
}

.speechBubble-photo	{
  display: table-cell;
  width:17%;
    flex: 0 0 10%;
}

.speechBubble-block{
	margin-top: -7px;;
}

.speechBubble-photo img {
    border-radius: 9999px;
    display: block;
    width: 100%;
}

.speechBubble-tumbler{

}

.speechBubble-tit{
	font-size:0.6rem;
	letter-spacing:0;
}

.speechBubble-name{
	margin-top:10px;
	font-weight:400;
	font-size:17px;
}

@media screen and (max-width: 650px) {
.speechBubble-photo	{
    flex: 0 0 15%;
}
	
}


/* コラム */
.point {
    background: var(--color-light-bg);
    border: var(--color-main) solid 1px;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .05);
    margin-block: 2rem 1rem;
    padding: 1.5rem;
    position: relative;
}

.point p {
	font-family: Noto Sans JP;
	font-weight:350;
    display: block;
	margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
	unicode-bidi: isolate;
	text-align: justify; 
	line-height: 30px;
	margin:20px 0px;
}

.point-head {
    font-size: var(--pc-font-size-h3);
    font-weight: bold;
    line-height: 1.25;
}

.fas_header_beforesize{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight: normal;
	padding: 10px 0 10px calc(24px + 5px);	
	color: #333;
}
.fas_header_beforesize:before{
	position: absolute;
	top: 5px;
	left: 0;
	font-size: 24px;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Material Symbols Outlined"; 
	font-weight: nomal;
	content: '\e873';
}

.icon-note{
	position: relative;
	line-height: 1.4;
	font-size: 1em;
	font-weight:600;
	padding: 10px 0 10px calc(14px + 5px);
	color: #333;
}
.icon-note:before{
	color: var(--color-main);
	position:absolute;
	content: '\e873';
	top: 5px;
	left: -8px;
    font-family: 'Material Symbols Outlined';
    font-size: 1.4em;
    font-weight: normal;
    margin-right: 0.3em;
    vertical-align: middle;
}

.btn-inverse {
    background: var(--color-main);
    border-color: var(--color-main);
    color: white;
}

.btn-inverse::after {
    color: white;
}

.btn {
	text-align: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: #FFF !important;
    display: block;
    font-size: 110%;
    line-height: 1.5;
    margin-inline: auto;
    overflow: hidden;
    position: relative;
    padding: 1em 3em 1em 1em;
	text-decoration: none;
	margin-top:30px;
}

.btn::after {
    content: '\e5c8';
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-family: 'Material Symbols Outlined';
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
}

.container2 {
	padding-inline: var(--sp-side-padding);
	margin-bottom:50px;
}

.container2 p {
	font-family: Noto Sans JP;
	font-weight:350;
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
	margin-inline-start: 0px;
    margin-inline-end: 0px;
	unicode-bidi: isolate;
	text-align: justify; 
	line-height: 30px;
	margin:30px 0px;
}

@media screen and (min-width: 768px) {
	
    .btn {
        text-align: center;
        transition: all linear 0.2s;
    }
}

[class^="point-head icon-"] {
    padding-left: 1.7em;
    text-indent: -1.7em;
}

/* リボン */

.ribbon-ng {
margin-top:30px;
  display: inline-block;
  position: relative;
  padding: 10px 20px;
  font-size: 18px;/*フォントサイズ*/
  color: #FFF;/*フォントカラー*/
  background: #ADE6EF;/*リボンの色*/
}

.ribbon-ng:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 20px rgb(149, 158, 155);/*折り返し部分*/
}

.ribbon-ok {
margin-top:30px;
  display: inline-block;
  position: relative;
  padding: 10px 20px;
  font-size: 18px;/*フォントサイズ*/
  color: #FFF;/*フォントカラー*/
  background: #FF74BA;/*リボンの色*/
}

.ribbon-ok:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 20px rgb(149, 158, 155);/*折り返し部分*/
}

/* フッター */

@media screen and (min-width: 768px) {
    footer {
        padding-inline: var(--pc-side-padding);
    }
}

footer {
    background: var(--color-gray);
    margin-block: 4rem 0;
    padding: 2rem 0rem;
    text-align: center;
}

footer a {
    color: var(--color-txt);
}

.copyright {
    color: var(--color-txt-light);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    margin: 5px 0px;
}


/* 背景 */

.chapter-head {
   margin: 80px calc(50% - 50vw);
	padding:100px 0px;
	width:100vw;
  background-color: #fff;
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 25px,
      rgb(255, 222, 239, 1) 26px,  rgb(255, 222, 239, 1) 26px,
      transparent 27px,  transparent 51px, 
      rgb(255, 222, 239, 1) 52px,  rgb(255, 222, 239, 1) 52px,
      transparent 53px,  transparent 77px, 
      rgb(255, 222, 239, 1) 78px,  rgb(255, 222, 239, 1) 78px,
      transparent 79px,  transparent 103px, 
      rgb(255, 222, 239, 1) 104px,  rgb(255, 222, 239, 1) 104px,
      transparent 105px,  transparent 129px, 
      rgb(255, 222, 239, 1) 130px,  rgb(255, 222, 239, 1) 130px),

    repeating-linear-gradient(to right,
      transparent 25px,
      rgb(255, 222, 239, 1) 26px,  rgb(255, 222, 239, 1) 26px,
      transparent 27px,  transparent 51px, 
      rgb(255, 222, 239, 1) 52px,  rgb(255, 222, 239, 1) 52px,
      transparent 53px,  transparent 77px, 
      rgb(255, 222, 239, 1) 78px,  rgb(255, 222, 239, 1) 78px,
      transparent 79px,  transparent 103px, 
      rgb(255, 222, 239, 1) 104px,  rgb(255, 222, 239, 1) 104px,
      transparent 105px,  transparent 129px, 
      rgb(255, 222, 239, 1) 130px,  rgb(255, 222, 239, 1) 130px);
}


.chapter-title{
	padding:20px 0px;
	text-align:center;
}