@charset "utf-8";
/*
Theme Name: heartful-taxi - WEB SITE
Theme URI: 
Description: heartful-taxi
Version: 1.0
Author: heartful-taxi
Author URI: 
Tags: heartful-taxi
*/


/*  pagetitle  ----------------------------------------------*/

.per_pagetitle{
width: 100%;
margin: 0px;
padding: 0px 0px;
box-sizing: border-box;
font-size: 0px;
line-height: 0px;
clear: both;
position: relative;
container-type: inline-size;
}

.per_pagetitle h2 {
width: 100%;
margin: 0px;
padding: 167px 0px 0px 102px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 24px;
line-height: 1.2;
font-weight: bold;
color: #3c88e4;
letter-spacing: 0.03em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
}

.per_pagetitle h3 {
width: 100%;
margin: 0.5em 0px 0px 0px;
padding: 0px 0px 0px 100px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 36px;
line-height: 1.2;
font-weight: bold;
color: #1f1512;
letter-spacing: 0.03em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
}

.per_pagetitle h4 {
width: 100%;
margin: 1em 0px 0px 0px;
padding: 0px 0px 0px 88px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 20px;
line-height: 1.2;
font-weight: bold;
color: #1f1512;
letter-spacing: 0.03em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
}

.per_pagetitle h4 br {
display: none;
}

/* -----------------------------------------------------------------------------  pagetitle --- */




/*  per_box  ----------------------------------------------*/

.per_box{
width: calc(100% - 200px);
display:block;
margin:0px 0px 0px 100px;
padding: 50px 0px 50px 0px;
box-sizing: border-box;
position: relative;
clear:both;
font-size:0px;
line-height:0px;
overflow:hidden;
text-align: left;
container-type: inline-size;
}

.per_span_img{
width: 40cqw;
display:block;
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
position: relative;
float: left;
font-size:0px;
line-height:0px;
overflow:hidden;
text-align: left;
border-radius: 10px;
}

.per_span_img img{
width: 100%;
height: auto;
display: inline-block;
aspect-ratio: 70 / 80;
}

.per_span_txt{
width: 55cqw;
display:block;
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
position: relative;
float: right;
font-size:0px;
line-height:0px;
overflow:hidden;
text-align: left;
}

.per_span_txt h2 {
width: 100%;
margin: 1em 0px 0px 0px;
padding: 6px 0px 6px 0.8em;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 2cqw;
line-height: 1.2;
font-weight: bold;
color: #1f1512;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
border: solid 0px #3c88e4;
border-left-width: 7px;
}

.per_span_txt h3 {
width: 100%;
margin: 1em 0px 0px 0px;
padding: 6px 0px 6px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 1.2cqw;
line-height: 1.9;
font-weight: bold;
color: #1f1512;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
}

.per_span_txt p {
width: 100%;
margin:20px 0px 0px 0px;
padding:0px 0px 0px 0px;
clear: both;
position: relative;
display: inline-block;
}

.per_span_txt p a {
width: 460px;
height:60px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 24px;
line-height: 1.2;
font-weight: bold;
color: #fff;
text-decoration: none;
letter-spacing: 0.03em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
position: relative;
background: #3c88e4;
border: solid 2px #3c88e4;
border-radius: 4px;
transition: 0.3s;
transform: translate3d(0, 0, 0);
text-align: left;
}

.per_span_txt p a:hover {
color: #3c88e4;
background: #fff;
}

.per_span_txt p a u {
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
text-decoration: none;
position: absolute;
top: 16px;
left: 0px;
z-index: 3;
vertical-align: top;
text-align: center;
}

.per_span_txt p a em{
display:block;
width: 16px;
height: 16px;
margin:0px;
padding:0px;
box-sizing: border-box;
font-style: normal;
text-decoration: none;
position: absolute;
top: 22px;
right: 16px;
z-index: 5;
clear: both;
clip-path: polygon(0 45%, 25% 45%, 62% 45%, 84% 45%, 50% 0, 60% 0, 100% 50%, 60% 100%, 50% 100%, 84% 55%, 36% 55%, 0 55%);
background-color: #fff;
transition: 0.3s;
transform: translate3d(0, 0, 0);
}

.per_span_txt p a:hover em{
background-color: #3c88e4;
}

/* -----------------------------------------------------------------------------  per_box --- */


/*  per_box2  ----------------------------------------------*/

.per_box2{
width: calc(100% - 200px);
display:block;
margin:0px 0px 0px 100px;
padding: 30px 0px 0px 0px;
box-sizing: border-box;
position: relative;
clear:both;
font-size:0px;
line-height:0px;
overflow:hidden;
text-align: left;
container-type: inline-size;
}


.per_span_txt2{
width: 100%;
display:block;
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
position: relative;
clear: both;
font-size:0px;
line-height:0px;
overflow:hidden;
text-align: left;
border: solid 0px #3c88e4;
border-left-width: 7px;
}

.per_span_txt2 h2 {
width: 100%;
margin: 1em 0px 0px 0px;
padding: 6px 0px 0px 0.8em;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 2cqw;
line-height: 1.2;
font-weight: bold;
color: #1f1512;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
}

.per_span_txt2 h3 {
width: 100%;
margin: 0.6em 0px 0px 0px;
padding: 0px 0px 6px 1.5em;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 1.2cqw;
line-height: 1.9;
font-weight: bold;
color: #1f1512;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
}


.per_span_img2{
width: 100%;
margin:30px 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
position: relative;
clear: both;
font-size:0px;
line-height:0px;
overflow:hidden;
text-align: left;
display: inline-block;
}

.per_span_img2 img{
width: 100%;
height: auto;
display: inline-block;
aspect-ratio: 175 / 32;
}

/* -----------------------------------------------------------------------------  per_box2 --- */




/*  per_box3  ----------------------------------------------*/

.per_box3{
width: calc(100% - 200px);
margin:0px 0px 0px 100px;
padding: 0px 0px 50px 0px;
box-sizing: border-box;
position: relative;
clear:both;
font-size:0px;
line-height:0px;
overflow:hidden;
text-align: left;
container-type: inline-size;
display:flex;
flex-wrap: wrap;
flex-direction: row;
}

.per_box3 span {
width: 45%;
display:block;
margin:50px 2.5% 0px 2.5%;
padding:20px 2cqw 20px 2cqw;
box-sizing: border-box;
position: relative;
float: left;
vertical-align: top;
background-color: #e7f1f9;
border-radius: 10px;
transition: 0.3s;
transform: translate3d(0, 0, 0);
}

.per_box3 span h2 {
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0.5em 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 1.6cqw;
line-height: 1.4;
font-weight: bold;
color: #1f1512;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
border: solid 0px #98b2d8;
border-bottom-width: 1px;
}

.per_box3 span h2 em {
width: 4cqw;
margin: 0px 1.5cqw 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
text-decoration: none;
vertical-align: top;
}

.per_box3 span h2 em img {
width: 100%;
height: auto;
display: inline-block;
aspect-ratio: 1 / 1;
}

.per_box3 span h2 u {
width: calc(100% - 5.5cqw);
margin: 0px 0px 0px 0px;
padding: 0.7em 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
text-decoration: none;
vertical-align: top;
}

.per_box3 span p {
width: 100%;
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 1.1cqw;
line-height: 1.8;
font-weight: bold;
color: #1f1512;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
}

/* -----------------------------------------------------------------------------  per_box3 --- */


/*  per_box4  ----------------------------------------------*/

.per_box4{
width: calc(100% - 200px);
display:block;
margin:0px 0px 0px 100px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
position: relative;
clear:both;
font-size:0px;
line-height:0px;
overflow:hidden;
text-align: left;
container-type: inline-size;
}

.per_box4 span {
width: 70cqw;
display:block;
margin:0px auto 0px auto;
padding:20px 20px 20px 20px;
box-sizing: border-box;
position: relative;
clear: both;
vertical-align: top;
border: solid 10px #e7f1f9;
border-radius: 20px;
}

.per_box4 span h2 {
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0.5em;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 1.6cqw;
line-height: 1.9;
font-weight: bold;
color: #1f1512;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
}

.per_box4 span p {
margin: 10px 10px 0px 10px;
padding: 10px 1cqw 10px 1cqw;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 1cqw;
line-height: 1.2;
font-weight: bold;
color: #1f1512;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
background-color: #e7f1f9;
border-radius: 100px;
}

.per_box4 span h3 {
width: 100%;
margin: 1.2em 0px 0px 0px;
padding: 0px 0px 0px 0.5em;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 1.1cqw;
line-height: 1.8;
font-weight: bold;
color: #1f1512;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
}

/* -----------------------------------------------------------------------------  per_box4 --- */



/*  per_box5  ----------------------------------------------*/

.per_box5{
width: calc(100% - 200px);
display:block;
margin:80px 0px 0px 100px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
position: relative;
clear:both;
font-size:0px;
line-height:0px;
overflow:hidden;
text-align: center;
container-type: inline-size;
}

.per_box5 p {
width: 460px;
height:60px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
clear: both;
position: relative;
display: inline-block;
}

.per_box5 p + p{
margin:0px 0px 0px 50px;
padding:0px 0px 0px 0px;
}

.per_box5 p a {
width: 100%;
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 24px;
line-height: 1.2;
font-weight: bold;
color: #fff;
text-decoration: none;
letter-spacing: 0.03em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
position: relative;
background: #3c88e4;
border: solid 2px #3c88e4;
border-radius: 4px;
transition: 0.3s;
transform: translate3d(0, 0, 0);
text-align: left;
}

.per_box5 p a:hover {
color: #3c88e4;
background: #fff;
}

.per_box5 p a u {
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
text-decoration: none;
position: absolute;
top: 16px;
left: 0px;
z-index: 3;
vertical-align: top;
text-align: center;
}

.per_box5 p a em{
display:block;
width: 16px;
height: 16px;
margin:0px;
padding:0px;
box-sizing: border-box;
font-style: normal;
text-decoration: none;
position: absolute;
top: 22px;
right: 16px;
z-index: 5;
clear: both;
clip-path: polygon(0 45%, 25% 45%, 62% 45%, 84% 45%, 50% 0, 60% 0, 100% 50%, 60% 100%, 50% 100%, 84% 55%, 36% 55%, 0 55%);
background-color: #fff;
transition: 0.3s;
transform: translate3d(0, 0, 0);
}

.per_box5 p a:hover em{
background-color: #3c88e4;
}

/* -----------------------------------------------------------------------------  per_box5 --- */



/* ------ youtube_box  */

.youtube_box{
width: 100%;
display:block;
margin:0px 0px 0px 0px;
padding: 50px 0px 50px 0px;
box-sizing: border-box;
position: relative;
clear:both;
font-size:0px;
line-height:0px;
overflow:hidden;
text-align: center;
container-type: inline-size;
}

.youtube_box p {
width: 700px;
height: 100px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
clear: both;
position: relative;
display: inline-block;
}

.youtube_box p a {
width: 100%;
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
position: relative;
background-color: #e7f1f9;
border: solid 4px #3c88e4;
border-radius: 10px;
transition: 0.3s;
transform: translate3d(0, 0, 0);
text-align: center;
}

.youtube_box p a:hover {
background-color: #3c88e4;
}

.youtube_box p a em {
width: 560px;
height: 52px;
margin: 0px 0px 0px -280px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
text-decoration: none;
position: absolute;
top: 20px;
left: 50%;
background-image: url("img/youtube_1000x92_2.svg");
background-repeat: no-repeat;
background-position: 0px 0px;
background-size: 560px 52px;
transition: 0.3s;
transform: translate3d(0, 0, 0);
}

.youtube_box p a:hover em {
background-image: url("img/youtube_1000x92.svg");
}

/* --------------------------------------------- youtube_box  */





/*  スマートフォン ※iPhone6 Plus 以下を準拠  */
@media only screen and (max-width:899px) {






/*  pagetitle  ----------------------------------------------*/

.per_pagetitle{
width: 100%;
margin: 0px;
padding: 66px 0px 20px 0px;
box-sizing: border-box;
font-size: 0px;
line-height: 0px;
clear: both;
position: relative;
container-type: inline-size;
}

.per_pagetitle h2 {
width: 88cqw;
text-align: left;
margin: 0px 0px 0px 6cqw;
padding: 1em 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 4cqw;
line-height: 1.2;
font-weight: bold;
color: #3c88e4;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
}

.per_pagetitle h3 {
width: 88cqw;
text-align: left;
margin: 0.4em 0px 0px 6cqw;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 5.5cqw;
line-height: 1.2;
font-weight: bold;
color: #1f1512;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
}

.per_pagetitle h4 {
width: 88cqw;
margin: 0.7em 0px 0px 6cqw;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 4cqw;
line-height: 1.6;
font-weight: bold;
color: #1f1512;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
}

.per_pagetitle h4 br {
display: inline;
}

/* -----------------------------------------------------------------------------  pagetitle --- */



/*  per_box  ----------------------------------------------*/

.per_box{
width: 100%;
display:block;
margin:0px 0px 0px 0px;
padding: 0px 0px 20px 0px;
box-sizing: border-box;
position: relative;
clear:both;
font-size:0px;
line-height:0px;
overflow:hidden;
text-align: left;
container-type: inline-size;
}

.per_span_img{
width: 60cqw;
display:block;
margin:0px auto 0px auto;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
position: relative;
float: none;
clear: both;
font-size:0px;
line-height:0px;
overflow:hidden;
text-align: left;
border-radius: 10px;
}

.per_span_img img{
width: 100%;
height: auto;
display: inline-block;
aspect-ratio: 70 / 80;
}

.per_span_txt{
width: 88cqw;
display:block;
margin:0px auto 0px auto;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
position: relative;
float: none;
clear: both;
font-size:0px;
line-height:0px;
overflow:hidden;
text-align: left;
container-type: inline-size;
}

.per_span_txt h2 {
width: 100%;
margin: 2em 0px 0px 0px;
padding: 6px 0px 6px 0.8em;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 4.5cqw;
line-height: 1.4;
font-weight: bold;
color: #1f1512;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
border: solid 0px #3c88e4;
border-left-width: 7px;
}

.per_span_txt h3 {
width: 100%;
margin: 1em 0px 0px 0px;
padding: 6px 0px 6px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 4.5cqw;
line-height: 1.8;
font-weight: normal;
color: #1f1512;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
}

.per_span_txt p {
width: 100%;
margin:10px 0px 0px 0px;
padding:0px 0px 0px 0px;
clear: both;
position: relative;
display: inline-block;
}

.per_span_txt p a {
width: 100%;
height: auto;
aspect-ratio: 23 / 3;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 5cqw;
line-height: 1.2;
font-weight: bold;
color: #fff;
text-decoration: none;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
position: relative;
background: #3c88e4;
border: solid 2px #3c88e4;
border-radius: 4px;
transition: 0.3s;
transform: translate3d(0, 0, 0);
text-align: left;
}

.per_span_txt p a:hover {
color: #fff;
background: #3c88e4;
}

.per_span_txt p a u {
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
text-decoration: none;
position: absolute;
top: 11px;
left: 0px;
z-index: 3;
vertical-align: top;
text-align: left;
}

.per_span_txt p a em{
display:block;
width: 12px;
height: 12px;
margin:0px;
padding:0px;
box-sizing: border-box;
font-style: normal;
text-decoration: none;
position: absolute;
top: 15px;
right: 10px;
z-index: 5;
clear: both;
clip-path: polygon(0 45%, 25% 45%, 62% 45%, 84% 45%, 50% 0, 60% 0, 100% 50%, 60% 100%, 50% 100%, 84% 55%, 36% 55%, 0 55%);
background-color: #fff;
transition: 0.3s;
transform: translate3d(0, 0, 0);
}

.per_span_txt p a:hover em{
background-color: #fff;
}

/* -----------------------------------------------------------------------------  per_box --- */


/*  per_box2  ----------------------------------------------*/

.per_box2{
width: 100%;
display:block;
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
box-sizing: border-box;
position: relative;
clear:both;
font-size:0px;
line-height:0px;
overflow:hidden;
text-align: center;
container-type: inline-size;
}


.per_span_txt2{
width: 88%;
display:block;
margin:0px auto 0px auto;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
position: relative;
clear: both;
font-size:0px;
line-height:0px;
overflow:hidden;
text-align: left;
border: solid 0px #3c88e4;
border-left-width: 7px;
container-type: inline-size;
}

.per_span_txt2 h2 {
width: 100%;
margin: 0.6em 0px 0px 0px;
padding: 6px 0px 0px 0.8em;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 5.5cqw;
line-height: 1.2;
font-weight: bold;
color: #1f1512;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
}

.per_span_txt2 h3 {
width: 100%;
margin: 0.6em 0px 0px 0px;
padding: 0px 0px 10px 1.5em;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 3.5cqw;
line-height: 1.6;
font-weight: normal;
color: #1f1512;
letter-spacing: 0px;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
}

.per_span_img2{
width: 88%;
margin:20px 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
position: relative;
clear: both;
font-size:0px;
line-height:0px;
overflow:hidden;
text-align: left;
display: inline-block;
}

.per_span_img2 img{
width: 100%;
height: auto;
display: inline-block;
aspect-ratio: 175 / 32;
}

/* -----------------------------------------------------------------------------  per_box2 --- */




/*  per_box3  ----------------------------------------------*/

.per_box3{
width: 100%;
margin:0px 0px 0px 0px;
padding: 0px 0px 20px 0px;
box-sizing: border-box;
position: relative;
clear:both;
font-size:0px;
line-height:0px;
overflow:hidden;
text-align: left;
container-type: inline-size;
display:flex;
flex-wrap: wrap;
flex-direction: row;
}

.per_box3 span {
width: 88%;
display:block;
margin:20px auto 0px auto;
padding:10px 10px 10px 10px;
box-sizing: border-box;
position: relative;
float: none;
clear: both;
vertical-align: top;
background-color: #e7f1f9;
border-radius: 10px;
transition: 0.3s;
transform: translate3d(0, 0, 0);
container-type: inline-size;
}

.per_box3 span h2 {
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0.5em 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 5.5cqw;
line-height: 1.4;
font-weight: bold;
color: #1f1512;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
border: solid 0px #98b2d8;
border-bottom-width: 1px;
}

.per_box3 span h2 em {
width: 10cqw;
margin: 0px 3cqw 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
text-decoration: none;
vertical-align: top;
}

.per_box3 span h2 em img {
width: 100%;
height: auto;
display: inline-block;
aspect-ratio: 1 / 1;
}

.per_box3 span h2 u {
width: calc(100% - 13cqw);
margin: 0px 0px 0px 0px;
padding: 0.4em 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
text-decoration: none;
vertical-align: top;
}

.per_box3 span p {
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0.7em 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 4.5cqw;
line-height: 1.8;
font-weight: normal;
color: #1f1512;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
}

/* -----------------------------------------------------------------------------  per_box3 --- */


/*  per_box4  ----------------------------------------------*/

.per_box4{
width: 100%;
display:block;
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
position: relative;
clear:both;
font-size:0px;
line-height:0px;
overflow:hidden;
text-align: left;
container-type: inline-size;
}

.per_box4 span {
width: 88cqw;
display:block;
margin:0px auto 0px auto;
padding:10px 10px 10px 10px;
box-sizing: border-box;
position: relative;
clear: both;
vertical-align: top;
border: solid 5px #e7f1f9;
border-radius: 10px;
container-type: inline-size;
}

.per_box4 span h2 {
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0pxem;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 4cqw;
line-height: 1.8;
font-weight: bold;
color: #1f1512;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
}

.per_box4 span p {
margin: 10px 10px 0px 0px;
padding: 10px 10px 10px 10px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 4cqw;
line-height: 1.2;
font-weight: normal;
color: #1f1512;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
background-color: #e7f1f9;
border-radius: 10px;
}

.per_box4 span h3 {
width: 100%;
margin: 0.8em 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 4.5cqw;
line-height: 1.8;
font-weight: normal;
color: #1f1512;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
text-align: left;
}

/* -----------------------------------------------------------------------------  per_box4 --- */



/*  per_box5  ----------------------------------------------*/

.per_box5{
width: 100%;
display:block;
margin:20px 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
position: relative;
clear:both;
font-size:0px;
line-height:0px;
overflow:hidden;
text-align: center;
container-type: inline-size;
}

.per_box5 p {
width: 88cqw;
height: auto;
aspect-ratio: 23 / 3;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
clear: both;
position: relative;
display: inline-block;
container-type: inline-size;
}

.per_box5 p + p{
margin:10px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

.per_box5 p a {
width: 100%;
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
font-size: 5cqw;
line-height: 1.2;
font-weight: bold;
color: #fff;
text-decoration: none;
letter-spacing: 0.01em;
font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Verdana, sans-serif;
vertical-align: top;
position: relative;
background: #3c88e4;
border: solid 2px #3c88e4;
border-radius: 4px;
transition: 0.3s;
transform: translate3d(0, 0, 0);
text-align: left;
}

.per_box5 p a:hover {
color: #fff;
background: #3c88e4;
}

.per_box5 p a u {
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
text-decoration: none;
position: absolute;
top: 11px;
left: 0px;
z-index: 3;
vertical-align: top;
text-align: left;
}

.per_box5 p a em{
display:block;
width: 12px;
height: 12px;
margin:0px;
padding:0px;
box-sizing: border-box;
font-style: normal;
text-decoration: none;
position: absolute;
top: 15px;
right: 10px;
z-index: 5;
clear: both;
clip-path: polygon(0 45%, 25% 45%, 62% 45%, 84% 45%, 50% 0, 60% 0, 100% 50%, 60% 100%, 50% 100%, 84% 55%, 36% 55%, 0 55%);
background-color: #fff;
transition: 0.3s;
transform: translate3d(0, 0, 0);
}

.per_box5 p a:hover em{
background-color: #fff;
}

/* -----------------------------------------------------------------------------  per_box5 --- */



/* ------ youtube_box  */

.youtube_box{
width: 100%;
display:block;
margin:0px 0px 0px 0px;
padding: 10px 0px 10px 0px;
box-sizing: border-box;
position: relative;
clear:both;
font-size:0px;
line-height:0px;
overflow:hidden;
text-align: center;
container-type: inline-size;
}

.youtube_box p {
width: 88cqw;
height: auto;
aspect-ratio: 7 / 1;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
clear: both;
position: relative;
display: inline-block;
}

.youtube_box p a {
width: 100%;
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
position: relative;
background-color: #e7f1f9;
border: solid 2px #3c88e4;
border-radius: 4px;
transition: 0.3s;
transform: translate3d(0, 0, 0);
text-align: center;
}

.youtube_box p a:hover {
background-color: #3c88e4;
}

.youtube_box p a em {
width: 260px;
height: 24px;
margin: -12px 0px 0px -130px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
display:  inline-block;
font-style: normal;
text-decoration: none;
position: absolute;
top: 50%;
left: 50%;
background-image: url("img/youtube_1000x92_2.svg");
background-repeat: no-repeat;
background-position: 0px 0px;
background-size: 260px 24px;
transition: 0.3s;
transform: translate3d(0, 0, 0);
}

.youtube_box p a:hover em {
background-image: url("img/youtube_1000x92_2.svg");
}

/* --------------------------------------------- youtube_box  */








}
/* -----------------------------------------------------------------------------------------------  スマートフォン ※iPhone6 Plus 以下を準拠   */