@charset "UTF-8";

/* CSS Document */

/*PC*/
@media print, screen and (min-width: 768px) {

/*sec01*/
.sec01 { margin: 0 auto 90px;}
.sec01 h3 { margin: 0 0 40px;}
.sec01 h3 img { width: auto; height: 92px; margin: 0; padding: 0; vertical-align: top;}
.sec01 p { font-size: 1.6rem; line-height: 3.2rem;}




/*sec02*/
.sec02 { margin: 0 auto 90px;}
.sec02 h3 { margin: 0 auto 20px; width: 368px;}
.sec02 h3 img { width: 100%; height: auto;}
.sec02 .txt {}
.sec02 .txt h4 { margin: 0 auto 30px; text-align: center;}
.sec02 .txt h4 img { width: auto; height: 33px; margin: 0; padding: 0; vertical-align: top;}
.sec02 .txt p { margin: 0 auto 30px; font-size: 1.5rem;}
.sec02 ol { list-style: none; margin: 0; padding: 0;}
.sec02 ol li { width: calc( 100% - 62px - 5px); background: #FFF; border: solid 1px #000; padding: 15px 30px; margin: 0 0 40px; position: relative;}
.sec02 ol li::after { content: ""; border: solid 1px #000; position: absolute; top: 5px; left: 5px; bottom: -5px; right: -5px; z-index: -1;}
.sec02 ol li .ttl { display: flex; justify-content: flex-start; margin: 0 0 15px;}
.sec02 ol li .ttl p { position: relative; margin: auto 20px auto 0; width: 120px; height: 25px;}
.sec02 ol li .ttl p::after { content: ""; top: 0; left: 0; position: absolute; width: 120px; height: 25px; background: #0070B3; transform: skewX(-35deg); box-shadow: 2px 2px 0 0 #CCC;}
.sec02 ol li .ttl p span { position: absolute; display: inline-block; top: 50%; left: 50%; padding: 3px 0; color: #FFF; transform: translate(-50%, -50%); font-size: 1.2rem; white-space: nowrap; z-index: 10;}
.sec02 ol li .ttl h4 { font-size: 2.0rem; color: #0070B3; display: inline-block;}
.sec02 ol li p { font-size: 1.5rem; line-height: 2.5rem;}



/*sec03*/
.sec03 { margin: 0 auto 90px;}
.sec03 .ttl { margin: 0 auto 40px; text-align: center;}
.sec03 .ttl h3 { font-size: 6.0rem; font-family: 'Bebas Neue', cursive; font-weight: normal; color: #0070B3;}
.sec03 .ttl p { font-size: 1.5rem; color: #0070B3;}
.sec03 .txt {}
.sec03 .txt h3 { margin: 0 auto 30px;}
.sec03 .txt h3 img { width: auto; height: 92px; margin: 0; padding: 0; vertical-align: top;}
.sec03 .txt p { margin: 0 auto 30px; font-size: 1.5rem; line-height: 3.6rem;}







/*追加20230601*/
.min{
font-family: 'Noto Serif JP', serif;
}

.mx-img{
max-width:100% !important;
width:auto !important;
height:auto !important;
}

.ph-box01{
text-align:left !important;
display:block;
z-index:-1;
position: relative;
border:solid 1px;
padding-top:40px;
padding-bottom:40px;
margin-left:10px;
margin-bottom:40px;
padding-left:0 !important;
padding-right:0 !important;
}

.ph-box01:after{
position: absolute;
    top: -8px;
    left: -8px;
    width: 100%;
    height: 100%;
    border: 1px solid #212121;
    background:#fff;
    content: '';
    z-index:-10;
}

.p01{
margin-left:-8px !important;
}

.p01 span{
display:inline-block;
font-size:19px;
font-weight:bold;
color:#015cab;
padding-left:10px;
vertical-align:middle;
}

.ph_ul01,
.ph_ul02{
list-style-type:none;
font-size:20px;
margin-left:30px;
padding-top:10px;
}

.ph_ul01 li,
.ph_ul02 li{
margin-top:12px;
}

.ph_ul02 .li01,
.ph_ul02 .li02,
.ph_ul02 .li03{
color:#015cab;
font-size:20px;
font-weight:bold;
}

.ph_ul01 li:before,
.ph_ul02 li:before{
  content: '';
  display: inline-block;
  width: 28px;
  height: 28px;
  background-size: contain;
  vertical-align: middle;
  margin-right:6px;
}

.li01:before{
  background-image: url(../images/philosophy/1.png);
}

.li02:before{
  background-image: url(../images/philosophy/2.png);
}

.li03:before{
  background-image: url(../images/philosophy/3.png);
}

.p02{
color:#015cab;
font-size:65px;
font-weight:700;
letter-spacing:1px;
padding-top:10px;
}

.ul-in{
list-style-type:none;
font-size:17px;
color:#000;
margin-left:0;
font-weight:normal;
}

.ul-in li{
margin-left:30px !important;
margin-top:5px;
}

.ul-in li:before{
  display: inline-block;
  line-height:17px;
  height:17px;
  width: 17px;
  margin-right:6px;
}


.ul-in .inl01:before{content:"①";}
.ul-in .inl02:before{content:"②";}
.ul-in .inl03:before{content:"③";}
.ul-in .inl04:before{content:"④";}
.ul-in .inl05:before{content:"⑤";}
.ul-in .inl06:before{content:"⑥";}
.ul-in .inl07:before{content:"⑦";}
.ul-in .inl08:before{content:"⑧";}
.ul-in .inl09:before{content:"⑨";}
.ul-in .inl10:before{content:"⑩";}
.ul-in .inl11:before{content:"⑪";}


}

/*sp*/
@media only screen and (max-width: 767px) {

/*sec01*/
.sec01 { margin: 0 5% 50px;}
.sec01 h3 { margin: 0 0 20px;}
.sec01 h3 span { font-size: 1.8rem; line-height: 3.5rem; color: #0070B3; font-family: 'Noto Serif JP', serif; letter-spacing: 0.05em;}
.sec01 p { font-size: 1.6rem; line-height: 2.0rem;}




/*sec02*/
.sec02 { margin: 0 5% 90px;}
.sec02 h3 { margin: 0 20% 20px; width: auto;}
.sec02 h3 img { width: 100%; height: auto;}
.sec02 .txt {}
.sec02 .txt h4 { margin: 0 auto 20px;}
.sec02 .txt h4 span { font-size: 1.8rem; color: #0070B3; text-align: center; font-family: 'Noto Serif JP', serif; letter-spacing: -0.01em;}
.sec02 .txt p { margin: 0 auto 30px; font-size: 1.6rem;}
.sec02 ol { list-style: none; margin: 0; padding: 0;}
.sec02 ol li { width: calc( 100% - 42px - 5px); background: #FFF; border: solid 1px #000; padding: 15px 20px; margin: 0 0 40px; position: relative;}
.sec02 ol li::after { content: ""; border: solid 1px #000; position: absolute; top: 5px; left: 5px; bottom: -5px; right: -5px; z-index: -1;}
.sec02 ol li .sub { display: flex; justify-content: flex-start; margin: 0 0 0; position: absolute; top: -15px; left: 25px;}
.sec02 ol li .sub p { position: relative; margin: auto 20px auto 0; width: 120px; height: 25px;}
.sec02 ol li .sub p::after { content: ""; top: 0; left: 0; position: absolute; width: 120px; height: 25px; background: #0070B3; transform: skewX(-35deg); box-shadow: 2px 2px 0 0 #CCC;}
.sec02 ol li .sub p span { position: absolute; display: inline-block; top: 50%; left: 50%; padding: 3px 0; color: #FFF; transform: translate(-50%, -50%); font-size: 1.2rem; white-space: nowrap; z-index: 10;}
.sec02 ol li .ttl { display: flex; justify-content: flex-start; margin: 5px 0 10px;}
.sec02 ol li .ttl h4 { font-size: 1.8rem; color: #0070B3; display: inline-block; letter-spacing: -0.04em;}
.sec02 ol li p { font-size: 1.6rem; line-height: 2.2rem;}



/*sec03*/
.sec03 { margin: 0 5% 50px;}
.sec03 .ttl { margin: 0 auto 40px; text-align: center;}
.sec03 .ttl h3 { font-size: 4.0rem; font-family: 'Bebas Neue', cursive; font-weight: normal; color: #0070B3;}
.sec03 .ttl p { font-size: 1.2rem; color: #0070B3;}
.sec03 .txt {}
.sec03 .txt h3 { margin: 0 auto 20px;}
.sec03 .txt h3 span { font-size: 1.8rem; line-height: 3.5rem; color: #0070B3; font-family: 'Noto Serif JP', serif; letter-spacing: -0.05em;}
.sec03 .txt p { margin: 0 auto 30px; font-size: 1.6rem; line-height: 2.2rem;}




/*追加20230601*/
.min{
font-family: 'Noto Serif JP', serif;
}

.mx-img{
max-width:100% !important;
width:auto !important;
height:auto !important;
}

.ph-box01{
text-align:left !important;
display:block;
z-index:10;
position: relative;
border:solid 1px;
padding-top:20px;
padding-bottom:20px;
margin-left:10px;
margin-bottom:40px;
padding-left:0 !important;
padding-right:0 !important;
}

.ph-box01:after{
position: absolute;
    top: -8px;
    left: -8px;
    width: 100%;
    height: 100%;
    border: 1px solid #212121;
    background:#fff;
    content: '';
    z-index:-10;
}

.p01{
margin-left:-8px !important;
}

.p01 span{
display:inline-block;
font-size:16px;
font-weight:bold;
color:#015cab;
padding-left:10px;
vertical-align:middle;
padding-right:10px;
padding-top:8px;
}

.ph_ul01,
.ph_ul02{
list-style-type:none;
font-size:15px;
margin-left:10px;
padding-top:5px;
padding-right:10px;
}

.ph_ul01 li,
.ph_ul02 li{
margin-top:12px;
position:relative;
margin-left:30px;
}

.ph_ul02 .li01,
.ph_ul02 .li02,
.ph_ul02 .li03{
color:#015cab;
font-size:17px;
font-weight:bold;
}

.ph_ul01 li:before,
.ph_ul02 li:before{
  position:absolute;
  content: '';
  display: block;
  left:-32px;
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat:no-repeat;
}

.li01:before{
  background-image: url(../images/philosophy/1.png);
}

.li02:before{
  background-image: url(../images/philosophy/2.png);
}

.li03:before{
  background-image: url(../images/philosophy/3.png);
}

.p02{
color:#015cab;
font-size:25px;
font-weight:700;
letter-spacing:0;
padding-top:10px;
}

.ul-in{
list-style-type:none;
font-size:14px;
color:#000;
margin-left:0;
font-weight:normal;
}

.ul-in li{
margin-left:0px !important;
margin-top:5px;
padding-right:10px;
}

.ul-in li:before{
  display: inline-block;
  line-height:17px;
  height:17px;
  width: 14px;
  margin-right:0 !important;
  margin-left:10px;
}


.ul-in .inl01:before{content:"①";}
.ul-in .inl02:before{content:"②";}
.ul-in .inl03:before{content:"③";}
.ul-in .inl04:before{content:"④";}
.ul-in .inl05:before{content:"⑤";}
.ul-in .inl06:before{content:"⑥";}
.ul-in .inl07:before{content:"⑦";}
.ul-in .inl08:before{content:"⑧";}
.ul-in .inl09:before{content:"⑨";}
.ul-in .inl10:before{content:"⑩";}
.ul-in .inl11:before{content:"⑪";}




}