@charset "utf-8";

.pc_only{
display: block;
}
.sp_only{
display: none;
}
img{
display: block;
width: 100%;
}
.miyoshi_area{
display: block;
max-width: 1200px;
margin: 0 auto;
}
@media screen and (min-width: 769px) {
.miyoshi_area.pc_only{
display: block;
max-width: 1280px;
height: auto;
/*height: 100vh;*/
position: relative;
background: #000;
}
.miyoshi_area.pc_only img{
width:100%;
height:auto;
margin: 0 auto;
/*
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%); 
*/
}
}

#tp-inf {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border: solid 4px #eee;
margin: 0 var(--content-space) 50px;
padding: 30px 20px 10px;
align-items: center;
}

@media screen and (min-width: 500px) {
.pc_only{
display: block;
}
.sp_only{
display: none;
}
.tp-inf-img {
width: 40%;
margin-right: 10%;
}
.tp-inf-txt {
width: 50%;
}
}

@media screen and (max-width: 499px) {
.pc_only{
display: none;
}
.sp_only{
display: block;
}
.tp-inf-img {
width: 100%;
margin: 0 0 20px 0;
}
.tp-inf-txt {
width: 100%;
}
#tp-inf h2 {
display: block!important;
}
.up.upstyle {
margin-bottom: 40px;
}
.grid-box h2 {
margin: 40px 0 20px!important;
}
.infbox {
padding: 10px 20px;
}
}

#tp-inf h2 {
color: #47443f;
margin: 0 0 10px 0;
line-height: 1.5;
display: inline;
font-size: 140%;
}

#tp-inf h2 span {
font-size: .8rem;
color: #47443f;
opacity: 1;
letter-spacing: 0;
}

.tp-inf-txt p {
margin: 0 0 20px 0;
line-height: 1.8;
}

.mpbtn {
background: #4682b4;
padding: 10px 30px;
text-decoration: none;
display: block;
line-height: 1.5;
text-align: center;
margin: 10px 0;
color: #fff;
border-radius: 6px;
}

.mpbtn i,#cmp i,.new i {
margin-right:.5em;
}

#stp-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
/*padding: 20px;
border: solid 4px #ccc;
border-radius: 10px;*/
margin: 0 0 20px;
}

#stp-box-inr.end {
border: medium;
padding: 0px;
}

@media screen and (min-width: 880px){
#stp-box-inr {
width: 32%;
border-right: solid 2px #ccc;
padding: 0 2% 0 0;
}
}

@media screen and (max-width: 879px){
#stp-box-inr {
width: 100%;
border-bottom: solid 2px #ccc;
padding: 0 0 20px 0;
margin: 0 0 20px 0;
}
}

#stp-box-inr .ttl {
display: flex;
align-items: center;
height: auto;
font-size: 16px;
line-height: 1.5;
font-weight: 700;
margin: 0 0 10px 0;
border-bottom: dotted 2px #ddd;
padding: 0 0 10px 0;
}

#stp-box-inr .ttl img {
width: 60px;
height: auto;
margin: 0 12px 0 0;
}

#stp-box-inr .txt {
margin: 0;
line-height: 160%;
}

#cmp {
margin-bottom:60px;
}

#cmp h3 {
line-height: 1.5;
font-size: 1.6rem;
margin: 0 0 10px 0;
display: flex;
justify-content: center;
align-items: center;
}

#cmp h3::before,
#cmp h3::after {
width: 3px;
height: 40px;
background-color: #000000;
content: '';
}

#cmp h3::before {
transform: rotate(-35deg);
margin-right: 30px;
}

#cmp h3::after {
transform: rotate(35deg);
margin-left: 30px;
}

#cmp h4 {
font-size: 120%;
line-height: 1.5;
margin: 0 0 20px 0;
padding: 0 0 5px 0;
border-bottom: solid 2px #4682b4;
color:#4682b4;
}

#cmp span {
font-weight: 700;
color: #ed5100;
}

#cmp-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0 0 30px;
}

.lnlg {
width: 60px;
height: 60px;
}

.ln-p {
width: calc(100% - 100px);
line-height:1.8;
}