:root{
    --arrow-color:#333; /* デフォルトの矢印の色を設定 */
}
p.detail-text{
    text-align: center;
    white-space: pre-wrap;
    font-size: 18pt;
}

h1.head1{
    font-size: 40px;
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;

    font-weight: bold;
    line-height: 1;

    letter-spacing: .05em;
    color: #333;
}

h2.head1{
    font-size: 34px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;

    font-weight: bold;
    line-height: 1;

    letter-spacing: .05em;
    color: #333;
}

h2.head2{
    font-size: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;

    font-weight: normal;
    line-height: 1;

    letter-spacing: .05em;
    color: #555;
}
h3.head1{
    font-size: 30pt;
    margin-top: 70px;
    margin-bottom: 1px;
    text-align: center;

    font-weight: normal;
    line-height: 1;

    letter-spacing: .05em;
    color: #005;
}


.explanation-content{

    margin: 0 auto;
    width :80%;
}

.explanation-screen-image{
    width: 100%;

}

.href{
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 20px;
}




/* 矢印右---------------------------------------------- */

.arrowbtn a {
	
	position: relative; /* 疑似要素を位置指定するための基準 */
	padding: 0 2.5em .5em .5em; /* 内側の余白（右に矢印部分を空ける） */
	color: var(--arrow-color); /* 文字色を矢印の色と統一 */
	text-decoration: none; /* 下線を非表示 */
}

.arrowbtn a::before {
	border-bottom: 1px solid var(--arrow-color); /* 下線としての矢印部分 */
	border-right: 1px solid var(--arrow-color); /* 右線としての矢印部分 */
	bottom: 0; /* 矢印をボタン下部に配置 */
	content: ''; /* 疑似要素でコンテンツを空に設定 */
	height: 12px; /* 矢印の高さ */
	position: absolute; /* 親要素から相対的に配置 */
	left: 0; /* 矢印の位置を左端に */
	transform: skewX(50deg); /* 矢印の形状を傾けてデザイン */
	width: 100%; /* ボタン全体の幅に矢印を合わせる */
	transition: all .3s; /* なめらかな動き（ホバー時） */
}

/* マウスオーバー時の動き */
.arrowbtn a:hover::before {
	left: 10%; /* ホバー時、矢印が右に10%ずれる */
}




/* 矢印左---------------------------------------------- */

.arrowbtn-left a {
	
	position: relative; /* 疑似要素を位置指定するための基準 */
	padding: .5em 0 .5em 2.5em; /* 内側の余白（右に矢印部分を空ける） */
	color: var(--arrow-color); /* 文字色を矢印の色と統一 */
	text-decoration: none; /* 下線を非表示 */
}

.arrowbtn-left a::before {
	border-bottom: 1px solid var(--arrow-color); /* 下線としての矢印部分 */
	border-left: 1px solid var(--arrow-color); /* 左線としての矢印部分 */
	bottom: 0; /* 矢印をボタン下部に配置 */
	content: ''; /* 疑似要素でコンテンツを空に設定 */
	height: 12px; /* 矢印の高さ */
	position: absolute; /* 親要素から相対的に配置 */
	right: 0; /* 矢印の位置を右端に */
	transform: skewX(130deg); /* 矢印の形状を傾けてデザイン */
	width: 100%; /* ボタン全体の幅に矢印を合わせる */
	transition: all .3s; /* なめらかな動き（ホバー時） */
}

/* マウスオーバー時の動き */
.arrowbtn-left a:hover::before {
	right: 10%; /* ホバー時、矢印が左に10%ずれる */
}