@charset "UTF-8";
/* CSS Document */


/* ************************************************************
レスポンシブ画像切り替え（基本的なブレイクポイントではpc,mb、イレギュラーな部分だけ02,03等つけていく）
************************************************************ */

.pc1200{display:block;}
.mb1200{display: none;} 
.pc1024{display:block;}
.mb1024{display: none;} 
.pc768{display:block;}
.mb768{display: none;} 
.pc02{display:block;}
.mb02{display: none;} 
.pc03{display:block;}
.mb03{display: none;} 
.pc04{display:block;}
.mb04{display: none;} 
.mb1024{display:none;}

/* ▼▼▼▼▼▼▼▼MaxWidth1024▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 1200px) {
 /* ************** */
 
.pc1200{display:none;}
.mb1200{display: block;} 

 /* *************** */
	}


/* ▼▼▼▼▼▼▼▼MaxWidth1024▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 1024px) {
 /* ************** */
 
.pc1024{display:none;}
.mb1024{display: block;} 

 /* *************** */
	}

/* ▼▼▼▼▼▼▼▼MaxWidth768▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 768px) {
 /* ************** */

.pc768{display:none;}
.mb768{display: block;} 

 /* *************** */
	}


/* ▼▼▼▼▼▼▼▼MaxWidth768▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 600px) {
 /* ************** */

.pc02{display:none;}
.mb02{display: block;} 

 /* *************** */
	}


/* ▼▼▼▼▼▼▼▼MaxWidth768▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 480px) {
 /* ************** */

.pc03{display:none;}
.mb03{display: block;} 

 /* *************** */
	}


/* ▼▼▼▼▼▼▼▼MaxWidth768▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 380px) {
 /* ************** */

.pc04{display:none;}
.mb04{display: block;} 

 /* *************** */
	}


/* ************************************************************
 共通部分（英語表記）　フォントサイズのみ
 ************************************************************ */
/*英語表記　位置調整*/
#top-renewal2022 h2{
position: relative;
text-align: center;
width: 100%;
font-family: 'Bebas Neue', cursive;
font-size: 140px;
letter-spacing: 0.05em;
}

/*h2下線　必要な箇所だけ追加　色のみ各ブロックで指定*/
#top-renewal2022 #block02 h2::after,
#top-renewal2022 #block08 h2::after{
content:"";
display:block;
width:150px;
height:6px;

position:absolute;
bottom:0;
left:50%;
transform: translateX(-50%);
}

#top-renewal2022 h3{
margin: 3% auto 0;
font-size: 18px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.05em;
}

/* ******************************************* */
@media screen and (max-width: 1700px) {
 /* ---------------------------------- */
#top-renewal2022 h2{font-size: 130px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1500px) {
 /* ---------------------------------- */

#top-renewal2022 h2{font-size: 130px;}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1400px) {
 /* ---------------------------------- */
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
#top-renewal2022 h2{font-size: 100px;}

/*h2下線　必要な箇所だけ追加　色のみ各ブロックで指定*/
#top-renewal2022 #block02 h2::after,
#top-renewal2022 #block08 h2::after{bottom:-8px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
/*h2下テキスト*/
#top-renewal2022 h3{font-size: 17px;}
/* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 900px) {
 /* ---------------------------------- */

#top-renewal2022 h2{font-size: 85px;}

/*h2下線　必要な箇所だけ追加　位置指定s*/
#top-renewal2022 #block02 h2::after,
#top-renewal2022 #block08 h2::after{
width:100px;
height:4px;
}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
/*h2下テキスト*/
#top-renewal2022 h3{font-size: 15px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 680px) {
 /* ---------------------------------- */

#top-renewal2022 h2{
width: 100%;
font-size: 100px;
}

/*h2下線　必要な箇所だけ追加　位置指定s*/
#top-renewal2022 #block02 h2::after,
#top-renewal2022 #block08 h2::after{
width:100px;
height:6px;
}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
/*h2下テキスト*/
#top-renewal2022 h3{font-size: 13px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#top-renewal2022 h2{font-size: 80px;}
 
/*h2下線　必要な箇所だけ追加　位置指定s*/
#top-renewal2022 #block02 h2::after,
#top-renewal2022 #block08 h2::after{
width:80px;
height:4px;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */
 /* ---------------------------------- */
}




/* ************************************************************
main-visual slick部分
************************************************************ */
#top-renewal2022 #mainvisual{
margin:0 auto;
width:100%;
position:relative;
}

/*slick上書き*/
#top-renewal2022 #mainvisual .slider {
width: 100%;
margin: 0 auto;
}

#top-renewal2022 #mainvisual .slick-slide img {
width: 100%;
height: auto;
}

#top-renewal2022 #mainvisual .mv-slick {
margin:0 auto;
width: 100%;
text-align: center;
}

#top-renewal2022 #mainvisual .mv-slick-mb {display:none}

/*左縦文字*/
#top-renewal2022 #mainvisual .vertical-text{
margin: 0 auto;
text-align: center;

padding: 1.5% .5%;
font-size: 50px;
font-weight: 700;
letter-spacing: 0.05em;
background: #fff;

writing-mode: vertical-rl;
position: absolute;
z-index: 1;
}

#top-renewal2022 #mainvisual .vertical-text span{
font-size: 50px;
font-weight: 700;
color: #e70000;
}

/*左縦文字　それぞれの位置*/
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(1){
bottom: 20%;
left: 500px;
}

#top-renewal2022 #mainvisual .vertical-text:nth-of-type(2){
bottom: 10%;
left: 380px;
}

#top-renewal2022 #mainvisual .vertical-text:nth-of-type(3){
bottom: -5%;
left: 260px;
}

/*縦線え*/
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(3)::after{
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -500px;
width: 5px;
height: 480px;
background: #ffc80a;
z-index: 1;
}


/* *********** ******************************** */
@media screen and (max-width: 2200px) {
 /* ---------------------------------- */
/*左縦文字*/
#top-renewal2022 #mainvisual .vertical-text{font-size: 45px;}
#top-renewal2022 #mainvisual .vertical-text span{font-size: 45px;}

/*左縦文字　それぞれの位置*/
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(1){left: 500px;}
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(2){left: 380px;}
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(3){left: 260px;}
 /* ---------------------------------- */
}


/* *********** ******************************** */
@media screen and (max-width: 1920px) {
 /* ---------------------------------- */
 /*左縦文字*/
#top-renewal2022 #mainvisual .vertical-text{
padding: 1.5%;
font-size: 35px;
}

#top-renewal2022 #mainvisual .vertical-text span{font-size: 35px;}

 /*左縦文字　それぞれの位置*/
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(1){left: 300px;}
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(2){left: 220px;}
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(3){left: 140px;}
 /* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 1500px) {
 /* ---------------------------------- */
 /*丸ボタン*/
#top-renewal2022 #mainvisual .mv-botton{
width: 90px;
top: 100px;
right: 40px;
}
#top-renewal2022 #mainvisual .mv-botton p:nth-of-type(1){margin-bottom: 20px;}

 /*左縦文字　それぞれの位置*/
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(1){left: 250px;}
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(2){left: 170px;}
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(3){left: 90px;}
 /* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 1300px) {
 /* ---------------------------------- */
 /*左縦文字*/
#top-renewal2022 #mainvisual .vertical-text{font-size: 25px;}

#top-renewal2022 #mainvisual .vertical-text span{font-size: 25px;}
 /*左縦文字　それぞれの位置*/
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(1){left: 220px;}
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(2){left: 160px;}
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(3){left: 100px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
  /*左縦文字*/
#top-renewal2022 #mainvisual .vertical-text{font-size: 23px;}

#top-renewal2022 #mainvisual .vertical-text span{font-size: 23px;}
/*縦線え*/
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(3)::after{
bottom: -370px;
width: 4px;
height: 350px;
}

 /*左縦文字　それぞれの位置*/
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(1){left: 180px;}
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(2){left: 130px;}
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(3){left: 80px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 900px) {
 /* ---------------------------------- */

/*左縦文字*/
#top-renewal2022 #mainvisual .vertical-text{font-size: 30px;}

#top-renewal2022 #mainvisual .vertical-text span{font-size: 30px;}
 /*左縦文字　それぞれの位置*/
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(1){
bottom: 30%;
left: 200px;
height: 320px;
}

#top-renewal2022 #mainvisual .vertical-text:nth-of-type(2){
bottom: 20%;
left: 130px;
height: 320px;
}

#top-renewal2022 #mainvisual .vertical-text:nth-of-type(3){
bottom: 10%;
left: 60px;
height: 320px;
}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
/*左縦文字*/
#top-renewal2022 #mainvisual .vertical-text{font-size: 27px;}
#top-renewal2022 #mainvisual .vertical-text span{font-size: 27px;}

/*左縦文字　それぞれの位置*/
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(4){
bottom: 15%;
left: 130px;
height: 420px;
}

#top-renewal2022 #mainvisual .vertical-text:nth-of-type(5){
bottom: 0;
left: 60px;
height: 440px;
}

#top-renewal2022 #mainvisual .vertical-text:nth-of-type(5)::after{
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -350px;
width: 4px;
height: 330px;
background: #ffc80a;
z-index: 1;
}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
/*左縦文字*/
#top-renewal2022 #mainvisual .vertical-text{font-size: 25px;}
#top-renewal2022 #mainvisual .vertical-text span{font-size: 25px;}

/*左縦文字　それぞれの位置*/
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(4){
bottom: 15%;
left: 100px;
height: 360px;
}

#top-renewal2022 #mainvisual .vertical-text:nth-of-type(5){
bottom: 0;
left: 35px;
height: 390px;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
/*左縦文字*/
#top-renewal2022 #mainvisual .vertical-text{font-size: 20px;}
#top-renewal2022 #mainvisual .vertical-text span{font-size: 20px;}

/*左縦文字　それぞれの位置*/
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(4){
bottom: 15%;
left: 85px;
height: 320px;
}

#top-renewal2022 #mainvisual .vertical-text:nth-of-type(5){
left: 35px;
height: 340px;
}

#top-renewal2022 #mainvisual .vertical-text:nth-of-type(5)::after{
bottom: -300px;
height: 280px;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */
/*左縦文字*/
#top-renewal2022 #mainvisual .vertical-text{font-size: 17px;}
#top-renewal2022 #mainvisual .vertical-text span{font-size: 17px;}

/*左縦文字　それぞれの位置*/
#top-renewal2022 #mainvisual .vertical-text:nth-of-type(4){
bottom: 20%;
left: 60px;
height: 250px;
}

#top-renewal2022 #mainvisual .vertical-text:nth-of-type(5){
left: 20px;
height: 270px;
}
 /* ---------------------------------- */
}



/* ************************************************************
block01
************************************************************ */
#top-renewal2022 #block01{
margin: 0 auto;
width: 100%;
}

#top-renewal2022 #block01 h1{
width: 100%;
text-align: right;
padding:1.5% 1%;
background: #ffe233;
}

#top-renewal2022 #block01 h1 img{
width: 85%;
}

#top-renewal2022 #block01 article{
margin: 0 auto;
width: 100%;
border-left: solid 100px #ffe233;
}

/*幸せな〜の列*/
#top-renewal2022 #block01 article .concept-top{
display: flex;
justify-content: flex-end;
align-items: flex-end;
flex-flow: row nowrap;
}

#top-renewal2022 #block01 article .concept-top p:nth-of-type(1){
position: relative;
left: 50%;
transform: translateX(-50%);
width: 50%;
}

#top-renewal2022 #block01 article .concept-top p:nth-of-type(2){
text-align: right!important;
width: 50%;
}

/*コンセプト文の列*/
#top-renewal2022 #block01 article .concept-bottom{
margin: 10% auto;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row nowrap;
}

/*英語表記　色・薄さ・余白・位置調整*/
#top-renewal2022 #block01 article .concept-bottom h2{
text-align: center;
width: 50%;
color: #44361a;
opacity: .4;
}

#top-renewal2022 #block01 article .concept-bottom p{
text-align: left;
width: 50%;
font-size: 15px;
line-height: 3;
letter-spacing: 0.05em;
}

/*スライダー*/
#top-renewal2022 .slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

#top-renewal2022 .slider .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}



/* ******************************************* */
@media screen and (max-width: 1920px) {
 /* ---------------------------------- */
#top-renewal2022 #block01 article .concept-top p:nth-of-type(1){
left: -20%;
transform: translateX(0);
max-width: 130px;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1700px) {
 /* ---------------------------------- */
#top-renewal2022 #block01 article .concept-top p:nth-of-type(1){max-width: 110px;}

/*コンセプト文の列*/
#top-renewal2022 #block01 article .concept-bottom{
margin: 7% auto;
}


#top-renewal2022 #block01 article .concept-bottom p{
font-size: 13px;
line-height: 2.5;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1500px) {
 /* ---------------------------------- */
#top-renewal2022 #block01 article{border-left: solid 60px #ffe233;}

#top-renewal2022 #block01 article .concept-top p:nth-of-type(1){
left: -18%;
width: 45%;
max-width: 100px;
}

#top-renewal2022 #block01 article .concept-top p:nth-of-type(2){
text-align: right!important;
width: 55%;
}

#top-renewal2022 #block01 article .concept-bottom h2{
width: 45%;
}

#top-renewal2022 #block01 article .concept-bottom p{
width: 55%;
font-size: 14px;
}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1400px) {
 /* ---------------------------------- */
#top-renewal2022 #block01 article .concept-top p:nth-of-type(1){max-width: 90px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
#top-renewal2022 #block01 article{border-left: solid 45px #ffe233;}
#top-renewal2022 #block01 article .concept-top p:nth-of-type(1){max-width: 75px;}

#top-renewal2022 #block01 article .concept-bottom p{
width: 55%;
font-size: 12px;
line-height: 2;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
#top-renewal2022 #block01 article .concept-top p:nth-of-type(1){
left: -13%;
width: 40%;
}

#top-renewal2022 #block01 article .concept-top p:nth-of-type(2){
width: 60%;
}
/* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 900px) {
 /* ---------------------------------- */
 
#top-renewal2022 #block01 h1{
padding:3% 1%;
/* margin-top: -7%; */
}
#top-renewal2022 #block01 article .concept-top p:nth-of-type(1){
width: 35%;
left: -10%;
max-width: 70px;
}

#top-renewal2022 #block01 article .concept-top p:nth-of-type(2){
width: 65%;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 800px) {
 /* ---------------------------------- */
#top-renewal2022 #block01 h1{/* margin-top: -7%; */}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
 #top-renewal2022 #block01 h1{
/* margin-top: -9%; */
}
#top-renewal2022 #block01 article{border-left: solid 30px #ffe233;}

#top-renewal2022 #block01 article .concept-top p:nth-of-type(1){
width: 35%;
left: -8%;
max-width: 90px;
}

#top-renewal2022 #block01 article .concept-top p:nth-of-type(3){width: 65%;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 680px) {
 /* ---------------------------------- */
#top-renewal2022 #block01 h1{/* margin-top: -8%; */}

#top-renewal2022 #block01 article .concept-top p:nth-of-type(1){max-width: 80px;}

/*コンセプト文の列*/
#top-renewal2022 #block01 article .concept-bottom{
margin: 10% auto;
width: 90%;
flex-flow: column nowrap;
}

#top-renewal2022 #block01 article .concept-bottom h2{
text-align: left!important;
width: 100%;
}

#top-renewal2022 #block01 article .concept-bottom p br{display: none;}

#top-renewal2022 #block01 article .concept-bottom p{
text-align: justify;
width: 100%;
font-size: 12px;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#top-renewal2022 #block01 h1{
/* margin-top: -9.5%; */
padding:4% 2%;
}

#top-renewal2022 #block01 article{border-left: solid 10px #ffe233;}
#top-renewal2022 #block01 article .concept-top p:nth-of-type(1){max-width: 65px;}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 520px) {
 /* ---------------------------------- */
#top-renewal2022 #block01 h1{/* margin-top: -10.5%; */}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#top-renewal2022 #block01 h1{/* margin-top: -12%; */}
#top-renewal2022 #block01 article .concept-top p:nth-of-type(1){max-width: 55px;}
#top-renewal2022 #block01 article .concept-bottom p{line-height: 1.7;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 420px) {
 /* ---------------------------------- */
#top-renewal2022 #block01 h1{/* margin-top: -13%; */}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */
#top-renewal2022 #block01 h1{/* margin-top: -14%; */}
#top-renewal2022 #block01 article .concept-top p:nth-of-type(1){max-width: 47px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */
#top-renewal2022 #block01 h1{/* margin-top: -15%; */}
 /* ---------------------------------- */
}


/* ************************************************************
block02
************************************************************ */
#top-renewal2022 #block02{
text-align: center;
margin: 20% auto;
width: 100%;
}

#top-renewal2022 #block02 h2{
margin: 0 auto;
text-align: center!important;
}

/*h2下線　色のみ指定（他は一番上に）*/
#top-renewal2022 #block02 h2::after{background: #ffe233;}

/*h2下テキスト　位置など指定　フォントサイズや行間は一番上に*/
#top-renewal2022 #block02 h3{
margin: 3% auto 0;
width: 100%;
}

/*画像4つ*/
#top-renewal2022 #block02 ul{
margin: 10% auto 5%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;

}

#top-renewal2022 #block02 ul .pc680{
width: 100%;
}

#top-renewal2022 #block02 ul img{width: 100%;}

#top-renewal2022 #block02 ul li{
margin: 0 auto;
width: 50%;
height: auto;
background-size: cover;

}

/*ホバーしたらカラーに*/
#top-renewal2022 #block02 ul li:hover{

-webkit-filter: grayscale(1);
filter: white;
filter: grayscale(.5);
}

#top-renewal2022 #block02 .bels{
margin: 0 auto;
width: 70%;
/*
padding: 2% ;
font-size: 20px;
border: solid 5px #ffe233;
outline: solid 2px #ffe233; 
outline-offset: 4px;
line-height: 1.5;
*/
}

/*
#top-renewal2022 #block02 .bels span{
font-size: 25px;
color: #bf0000;
font-weight: 700;
}
*/

/**メディアクエリ**/
/* *********** ******************************** */
@media screen and (max-width: 1500px) {
 /* ---------------------------------- */

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
#top-renewal2022 #block02{margin: 25% auto 20%;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 900px) {
 /* ---------------------------------- */
#top-renewal2022 #block02{margin: 30% auto;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
 /*画像4つ*/
#top-renewal2022 #block02 ul{margin: 7% auto;}
#top-renewal2022 #block02 .bels{font-size: 16px;}
#top-renewal2022 #block02 .bels span{font-size: 20px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 680px) {
 /* ---------------------------------- */

/*画像4つ*/
#top-renewal2022 #block02 ul{
margin: 10% auto;
width: 100%;
flex-flow: column wrap;
}

#top-renewal2022 #block02 ul li{width: 100%;}
#top-renewal2022 #block02 .bels{width: 85%;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#top-renewal2022 #block02{margin: 30% auto 35%;}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#top-renewal2022 #block02{margin: 30% auto 40%;}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */
#top-renewal2022 #block02{margin: 30% auto 55%;}

 /* ---------------------------------- */
}


/* ************************************************************
block03
************************************************************ */
#top-renewal2022 #block03{
text-align: center;
margin: 0 auto;
width: 100%;
position: relative;
}

/*動くパーツ*/
#top-renewal2022 #block03 .cloud01{/*左の雲*/
width: 180px;
top: -160px;
left: 10%;
position: absolute;
}

#top-renewal2022 #block03 .cloud02{/*右の雲*/
width: 180px;
top: -120px;
left: 30%;
position: absolute;
}

#top-renewal2022 #block03 .walk{/*歩く人*/
position: absolute;
top: -130px;
width: 290px;
left: 17%;
z-index: -1
}

/*******雲用ふわふわのアニメーション*************/

#top-renewal2022 #block03 .cloud01,
#top-renewal2022 #block03 .cloud02{
animation-name: fuwafuwa;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 2.5s;
}

@keyframes fuwafuwa{
0% {
    transform: translate(0,0);
}
100% {
    transform: translate(-40px,0)
}
}

/*****************************************/

/*見出し*/
#top-renewal2022 #block03 .heading{
text-align: right;
margin: 0 10% 0 60%;
width: 30%;
}

#top-renewal2022 #block03 .heading h2{
text-align: right;
width: 100%;
margin: 0 auto;
}

#top-renewal2022 #block03 .heading h3{
text-align: right;
margin: 0 auto;
width: 100%;
}

/*縦文字とギャラリーを囲う枠*/
#top-renewal2022 #block03 .works-box{
margin: 0 auto;
padding: 0 5%;
width: 100%;
background: #f7f4e0;

display: flex;
justify-content: center;
align-items: flex-start;
flex-flow: row wrap;

position: relative;
}

/*左下の家イラスト*/
#top-renewal2022 #block03 .works-box .house-illust{
width: 40%;
position: absolute;
bottom: -10px;
left: 10px;
}

/*縦書き文字*/
#top-renewal2022 #block03 .works-box .vertical-text-works{
margin: 0 auto;
width: 20%;
max-width: 150px;
}

/*右の読み出し部分*/
#top-renewal2022 #block03 .works-box .custom-field{
margin: 0 auto;
padding: 8% 0;
width: 60%;
z-index: 100;
}

#top-renewal2022 #block03 .works-box .custom-field .works-gallery{
margin: 0 auto;
width: 100%;
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-flow: row wrap;

position: relative;
}

#top-renewal2022 #block03 .works-box .custom-field .works-gallery::after{
content:"";
display:block;
width:97%;
height:6px;
background-color:#fff;

position:absolute;
top:-17%;
left:50%;
transform: translateX(-50%);
}

/*ギャラリー 6つ*/
#top-renewal2022 #block03 .works-box .custom-field .works-gallery article{
margin: 0 auto 7%;
width: 30%;
}

#top-renewal2022 #block03 .works-box .custom-field .works-gallery article a{
display: block;
margin: 0 auto;
width: 100%;
}

#top-renewal2022 #block03 .works-box .custom-field .works-gallery article a .photo{
margin: 0 auto;
width: 100%;
}

#top-renewal2022 #block03 .works-box .custom-field .works-gallery article a .customer{
margin: 0 auto;
width: 100%;
padding: 3% 0;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.1em;

background: #2d2d2d;
color: #fff;
}

/*もっとみるボタン*/
#top-renewal2022 #block03 .more{
margin: 5% auto;
padding: 1.5% 2%;
width: 390px;
font-size: 20px;
font-weight: 500;
color: #fff;
background: #2d2d2d;
border: solid 2px #ffe233;
border-radius: 50px;
}

#top-renewal2022 #block03 .more::after{
content:"▶︎";
padding-left: 15px;
}

#top-renewal2022 #block03 .more:hover{
font-weight: 700;
color: #2d2d2d;
background: #ffe233;
border: solid 2px #2d2d2d;
transition-duration: .5s;
}


/**メディアクエリ**/
/* *********** ******************************** */
@media screen and (max-width: 1920px) {
 /* ---------------------------------- */
#top-renewal2022 #block03 .heading h2{margin:0 auto;}
 /* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 1500px) {
 /* ---------------------------------- */
 /*動くパーツ*/
#top-renewal2022 #block03 .cloud01{/*左の雲*/
width: 180px;
top: -160px;
left: 12%;
}

#top-renewal2022 #block03 .cloud02{/*右の雲*/
width: 180px;
top: -120px;
left: 36%;
}

#top-renewal2022 #block03 .walk{/*歩く人*/
top: -100px;
width: 250px;
}
 /* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 1300px) {
 /* ---------------------------------- */
#top-renewal2022 #block03 .works-box .custom-field .works-gallery::after{
width:97%;
top:-16%;
}
 
/*縦書き文字*/
#top-renewal2022 #block03 .works-box .vertical-text-works{
max-width: 120px;
}

/*右の読み出し部分*/
#top-renewal2022 #block03 .works-box .custom-field{
padding: 8% 0;
width: 70%;
}

/*ギャラリー 6つ*/
#top-renewal2022 #block03 .works-box .custom-field .works-gallery article{width: 28%;}
#top-renewal2022 #block03 .works-box .custom-field .works-gallery article a .customer{font-size: 14px;}

/*もっとみるボタン*/
#top-renewal2022 #block03 .more{
width: 290px;
font-size: 16px;
}

/*左下の家イラスト*/
#top-renewal2022 #block03 .works-box .house-illust{
width: 30%;
left: 10px;
}

/* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
 /*動くパーツ*/
#top-renewal2022 #block03 .cloud01{/*左の雲*/
width: 150px;
top: -130px;
left: 12%;
}

#top-renewal2022 #block03 .cloud02{/*右の雲*/
width: 150px;
top: -100px;
left: 36%;
}

#top-renewal2022 #block03 .walk{/*歩く人*/
top: -95px;
width: 190px;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
#top-renewal2022 #block03 .works-box .custom-field .works-gallery::after{width:95%;}
/*縦書き文字*/
#top-renewal2022 #block03 .works-box .vertical-text-works{max-width: 100px;}
#top-renewal2022 #block03 .works-box .custom-field .works-gallery article a .customer{font-size: 12px;}
/*もっとみるボタン*/
#top-renewal2022 #block03 .more{
width: 250px;
font-size: 14px;
}
#top-renewal2022 #block03 .cloud02{/*右の雲*/left: 40%;}

/*左下の家イラスト*/
#top-renewal2022 #block03 .works-box .house-illust{width: 350px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 900px) {
 /* ---------------------------------- */
#top-renewal2022 #block03 .works-box .vertical-text-works{max-width: 90px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
/*動くパーツ*/
#top-renewal2022 #block03 .cloud01{/*左の雲*/
width: 150px;
top: -130px;
left: 5%;
}

#top-renewal2022 #block03 .cloud02{/*右の雲*/
width: 150px;
top: -100px;
left: 35%;
}

#top-renewal2022 #block03 .walk{/*歩く人*/
top: -70px;
width: 170px;
left: 15%;
}
/*左下の家イラスト*/
#top-renewal2022 #block03 .works-box .house-illust{width: 300px;}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 680px) {
 /* ---------------------------------- */
/*見出し*/
#top-renewal2022 #block03 .heading{
margin: 0 10% 0 55%;
width: 35%;
}

#top-renewal2022 #block03 .works-box .custom-field .works-gallery::after{
width:93%;
height:4px;
top:-7%;
}

/*ギャラリー 6つ*/
#top-renewal2022 #block03 .works-box .custom-field .works-gallery article{width: 42%;}
#top-renewal2022 #block03 .works-box .vertical-text-works{max-width: 110px;}

/*もっとみるボタン*/
#top-renewal2022 #block03 .more{
padding: 2%;
}

/*動くパーツ*/
#top-renewal2022 #block03 .cloud01{/*左の雲*/
width: 120px;
top: -100px;
left: 8%;
}

#top-renewal2022 #block03 .cloud02{/*右の雲*/
width: 120px;
top: -55px;
left: 35%;
}

#top-renewal2022 #block03 .walk{/*歩く人*/
top: -50px;
left: 8%;
}

/*左下の家イラスト*/
#top-renewal2022 #block03 .works-box .house-illust{
width: 270px;
left: -40px;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
/*見出し*/
#top-renewal2022 #block03 .heading{
padding-right: 5%;
margin: 0 auto;
width: 100%;
}

#top-renewal2022 #block03 .works-box .custom-field .works-gallery::after{
width:93%;
height:4px;
top:-4%;
}

/*動くパーツ*/
#top-renewal2022 #block03 .cloud01{/*左の雲*/
width: 120px;
top: -100px;
left: 8%;
}

#top-renewal2022 #block03 .cloud02{/*右の雲*/
width: 120px;
top: -55px;
left: 35%;
}

#top-renewal2022 #block03 .walk{/*歩く人*/
top: -60px;
left: 35px;
}

/*左下の家イラスト*/
#top-renewal2022 #block03 .works-box .house-illust{
width: 270px;
left: -40px;
}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#top-renewal2022 #block03 .works-box .vertical-text-works{
width: 30%;
max-width: 70px;
}

/*右の読み出し部分*/
#top-renewal2022 #block03 .works-box .custom-field{
padding: 15% 0;
width: 70%;
}

/*ギャラリー 6つ*/
#top-renewal2022 #block03 .works-box .custom-field .works-gallery article{
margin: 0 auto 10%;
width: 85%;
}

#top-renewal2022 #top-renewal2022 #block03 .works-box .custom-field .works-gallery::after{
width:85%;
top:-3%;
}

/*もっとみるボタン*/
#top-renewal2022 #block03 .more{width: 200px;}

/*動くパーツ*/
#top-renewal2022 #block03 .cloud01{/*左の雲*/
top: -110px;
left: 50px;
}

#top-renewal2022 #block03 .cloud02{/*右の雲*/
top: -70px;
left: 200px;
}
#top-renewal2022 #block03 .walk{/*歩く人*/
top: -75px;
left: 20px;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */
/*動くパーツ*/
#top-renewal2022 #block03 .cloud01{/*左の雲*/
top: -110px;
left: 50px;
}

#top-renewal2022 #block03 .cloud02{/*右の雲*/
top: -55px;
left: 170px;
}
#top-renewal2022 #block03 .walk{/*歩く人*/
width: 140px;
top: -50px;
left: 0;
}
 /* ---------------------------------- */
}


/* ************************************************************
block04
************************************************************ */
#top-renewal2022 #block04{
margin: 3% auto 0;
width: 100%;
text-align: center;

background-image: url( "../img/top/block04-bg.jpg");
background-size:cover;
background-repeat: no-repeat;
background-position:center;
}

#top-renewal2022 #block04 .title{
margin: 0 auto;
width: 768px;
padding-bottom: 1%;
font-size: 60px;
font-family: 'Bebas Neue', cursive;
letter-spacing: 0.03em;
color: rgba(45,45,45,.6);
background: #fff;
border-radius: 0 0 40px 40px;
}

#top-renewal2022 #block04 h1{
margin: 10% auto 12%;
width: 100%;
font-size: 43px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.05em;
position: relative;
}

#top-renewal2022 #block04 h1::after{
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -30px;
width: 150px;
height: 6px;
background: #2d2d2d;
}

#top-renewal2022 #block04 ul{
margin: 0 auto;
width: 100%;
padding: 7% 7% 3%;
max-width: 1080px;
background: #fff;
border-radius: 30px;

display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
}

#top-renewal2022 #block04 ul li{
margin: 0 auto 7%;
width: 47%;
}

#top-renewal2022 #block04 ul p{
margin: 5% auto;
width: 100%;
max-width: 95%;
}

/*ご相談ボタン*/
#top-renewal2022 #block04 .loan{
margin: 0 auto;
padding: 1% 2%;
width: 600px;
font-size: 22px;
font-weight: 500;
color: #2d2d2d;
background: #ffe233;
border: solid 3px #2d2d2d;
border-radius: 50px;
}

#top-renewal2022 #block04 .loan::after{
content:"▶︎";
padding-left: 15px;
}

#top-renewal2022 #block04 .loan:hover{
font-weight: 700;
color: #ffe233;
background: #2d2d2d;
border: solid 3px #2d2d2d;
transition-duration: .5s;
}

/**メディアクエリ**/
/* *********** ******************************** */
@media screen and (max-width: 1300px) {
 /* ---------------------------------- */
/*ご相談ボタン*/
#top-renewal2022 #block04 .loan{font-size: 19px;}
#top-renewal2022 #block04 ul{
padding:8% 8% 2%;
width: 90%
}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
#top-renewal2022 #block04{margin: 3% auto 0;}

#top-renewal2022 #block04 .title{
width: 600px;
padding-top: .3%;
font-size: 45px;
border-radius: 0 0 30px 30px;
}

#top-renewal2022 #block04 h1{
margin: 8% auto 10%;
font-size: 35px;
}

#top-renewal2022 #block04 h1::after{
bottom: -20px;
width: 100px;
height: 4px;
}

#top-renewal2022 #block04 ul{width: 90%}

#top-renewal2022 #block04 ul li{
margin: 0 auto 7%;
width: 47%;
}

#top-renewal2022 #block04 ul p{max-width: 100%;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
#top-renewal2022 #block04{margin: 5% auto 0;}
/*ご相談ボタン*/
#top-renewal2022 #block04 .loan{width: 470px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
#top-renewal2022 #block04 h1{margin: 12% auto 14%;}
#top-renewal2022 #block04 ul p{max-width: 80%;}
/*ご相談ボタン*/
#top-renewal2022 #block04 .loan{width: 400px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 680px) {
 /* ---------------------------------- */
#top-renewal2022 #block04{margin: 7% auto 0;}
 
#top-renewal2022 #block04 .title{
width: 350px;
font-size: 35px;
border-radius: 0 0 20px 20px;
}

#top-renewal2022 #block04 h1{
margin: 10% auto 15%;
font-size: 25px;
}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#top-renewal2022 #block04 ul{
width: 85%;
padding: 15% 3% 6%;
border-radius: 20px;

flex-flow: column wrap;
}

#top-renewal2022 #block04 ul li{
margin: 0 auto 10%;
width: 80%;
}

#top-renewal2022 #block04 ul p{max-width: 95%;}

/*ご相談ボタン*/
#top-renewal2022 #block04 .loan{
padding: 2%;
width: 340px;
}

#top-renewal2022 #block04 .loan::after{padding-left: 8px;}

 /* ---------------------------------- */
}


/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#top-renewal2022 #block04{margin: 5% auto 0;}
 
#top-renewal2022 #block04 .title{
width: 250px;
font-size: 30px;
border-radius: 0 0 20px 20px;
}

#top-renewal2022 #block04 h1{
margin: 13% auto 17%;
font-size: 22px;
}

#top-renewal2022 #block04 h1::after{
bottom: -10px;
width: 60px;
height: 3px;
}

#top-renewal2022 #block04 ul li{width: 85%;}

/*ご相談ボタン*/
#top-renewal2022 #block04 .loan{width: 300px;}

/* ---------------------------------- */
}



/* ************************************************************
block05
************************************************************ */
#top-renewal2022 #block05{
margin: 13% auto;
width: 100%;
text-align: center;
}

#top-renewal2022 #block05 article{
margin: 0 auto;
width: 100%;
max-width: 900px;
display: flex;
justify-content: center;
align-items: stretch;
flex-flow: row wrap;
}

/*縦書き文字*/
#top-renewal2022 #block05 article .title{
margin: 0 auto;
width: 20%;
max-width: 120px;
position: relative;
}

#top-renewal2022 #block05 article .title::before{
content:"";
display:block;
width:4px;
height:800px;
background-color:#ffe233;
position:absolute;
top:0;
left:-25px;
z-index: -1;
}

/*8つのコラム　大枠*/
#top-renewal2022 #block05 article .loan-column{
margin: 0 auto;
width: 70%;
}

/*ボタン上テキスト*/
#top-renewal2022 #block05 article .loan-column>p{
margin: 0 auto 5%;
width: 100%;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
}

/*8つのコラム*/
#top-renewal2022 #block05 article .loan-column ul{
margin: 0 auto;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-flow: row wrap;
}

#top-renewal2022 #block05 article .loan-column ul li{
margin: 5% auto 0;
width: 45%;
}

#top-renewal2022 #block05 article .loan-column ul li:hover{
opacity: .7;
transition-duration: .3s;
}


/********************************/



/**メディアクエリ**/
/* *********** ******************************** */
@media screen and (max-width: 1500px) {
 /* ---------------------------------- */

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
#top-renewal2022 #block05{margin: 13% auto 17%;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
#top-renewal2022 #block05{margin:15% auto 20%;}
#top-renewal2022 #block05 article{padding: 0 10%}

/*縦書き文字*/
#top-renewal2022 #block05 article .title{
width: 25%;
max-width: 100px;
}

/*8つのコラム*/
#top-renewal2022 #block05 article .loan-column ul li{
margin: 5% auto 0;
width: 45%;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 900px) {
 /* ---------------------------------- */
/*縦書き文字*/
#top-renewal2022 #block05 article .title{
max-width: 90px;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
#top-renewal2022 #block05{margin: 17% auto 23%;}
/*縦書き文字*/
#top-renewal2022 #block05 article .title{
width: 15%;
max-width: 90px;
}

#top-renewal2022 #block05 article .title::before{
height:1000px;
left:-20px;
}

#top-renewal2022 #block05 article .loan-column{
margin: 0 auto;
width: 75%;
}

/*ボタン上テキスト*/
#top-renewal2022 #block05 article .loan-column>p{font-size: 12px;}
/*8つのコラム*/
#top-renewal2022 #block05 article .loan-column ul li{
margin: 5% auto 0;
width: 45%;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
/* ---------------------------------- */
#top-renewal2022 #block05{margin: 25% auto;}
#top-renewal2022 #block05 article{padding: 0 5% 0 15%}
/*縦書き文字*/
#top-renewal2022 #block05 article .title{
width: 15%;
max-width: 95px;
}
#top-renewal2022 #block05 article .title::before{height:1200px;}
/*8つのコラム*/
#top-renewal2022 #block05 article .loan-column ul li{
margin: 10% auto 0;
width: 80%;
}

#top-renewal2022 #block05 article .loan-column ul li:nth-of-type(3){order: 4;}
#top-renewal2022 #block05 article .loan-column ul li:nth-of-type(4){order: 3;}
#top-renewal2022 #block05 article .loan-column ul li:nth-of-type(7){order: 8;}
#top-renewal2022 #block05 article .loan-column ul li:nth-of-type(8){order: 7;}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#top-renewal2022 #block05{margin: 35% auto;}
#top-renewal2022 #block05 article{padding: 0 5% 0 10%}

/*縦書き文字*/
#top-renewal2022 #block05 article .title{
width: 17%;
max-width: 60px;
}
#top-renewal2022 #block05 article .title::before{left:-15px;}
/*8つのコラム*/
#top-renewal2022 #block05 article .loan-column ul li{
margin: 10% auto 0;
width: 83%;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */
/*縦書き文字*/
#top-renewal2022 #block05 article .title{
max-width: 80px;
}
/*ボタン上テキスト*/
#top-renewal2022 #block05 article .loan-column>p{font-size: 10px;}

 /* ---------------------------------- */
}



/* ************************************************************
block06 CASE　スライダー
************************************************************ */
/*********上部分　レスポンシブまで*********/
#top-renewal2022 #block06{
margin: 0 auto;
width: 100%;
}

/*メインタイトル*/
#top-renewal2022 #block06 .bar-title{
position:relative;

margin: 0 auto;
width: 100%;
padding: 6% 0 7%;

background-image: url( "../img/loan/block05-bg.jpg");
background-size:cover;
background-repeat: no-repeat;
background-position:center;
}

#top-renewal2022 #block06 .bar-title .title{
margin: 0 auto;
width: 100%;
max-width: 450px;
}

/* ******************************************* */
@media screen and (min-width: 1920px) {
 /* ---------------------------------- */
#top-renewal2022 #block06 .bar-title .title{max-width: 500px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
/*メインタイトル*/
#top-renewal2022 #block06 .bar-title{padding: 6% 0 9%;}
#top-renewal2022 #block06 .bar-title .title{max-width: 400px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
/*メインタイトル*/
#top-renewal2022 #block06 .bar-title{padding: 7% 0 10%;}
#top-renewal2022 #block06 .bar-title .title{max-width: 350px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
/*メインタイトル*/
#top-renewal2022 #block06 .bar-title{padding: 10% 0 13%;}
#top-renewal2022 #block06 .bar-title .title{max-width: 350px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
/*メインタイトル*/
#top-renewal2022 #block06 .bar-title{padding: 12% 0 15%;}
#top-renewal2022 #block06 .bar-title .title{max-width: 350px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
 /*メインタイトル*/
#top-renewal2022 #block06 .bar-title{padding: 15% 0 25%;}
#top-renewal2022 #block06 .bar-title .title{max-width: 80%;}

 /* ---------------------------------- */
}


/*********下部分　SCF　レスポンシブまで*********/

/*真ん中のテキスト*/
#top-renewal2022 #block06 .text{
text-align: center!important;
margin: 0 auto;
width: 100%;
font-size: 17px;
font-weight: 700;
line-height: 1.8;
letter-spacing: 0.05em;
}

#top-renewal2022 #block06 .text span{
font-size: 17px;
color: #bf0000;
}

/*SCF*/
#top-renewal2022 #block06 .case-list{
text-align: center!important;
margin: 0 auto;
width: 100%;
padding:8% 5% 10%;
background: #ffe233;
}

#top-renewal2022 #block06 .case-list .case-list-2{
margin: 0 auto;
width: 100%;
padding-top: 3%;
display: flex;
justify-content: space-between;
align-items: stretch;
flex-flow: row wrap;
}

#top-renewal2022 #block06 .case-list .case-list-2 article{
position: relative;
margin: 0 auto 7%;
width: 30%;
padding: 10% 0 5%;
background: #fff;
box-shadow: 5px 5px 0px 0 rgb(177, 158, 153);
}


/*CASE 00*/
#top-renewal2022 #block06 .case-list .case-list-2 article .case-No{
margin: 0 auto;
width: 100%;
font-family: 'Bebas Neue', cursive;
font-size: 30px;
color: #fff;
text-shadow: 
       3px  3px 2px #323231,
      -3px  3px 2px #323231,
       3px -3px 2px #323231,
      -3px -3px 2px #323231,
       3px  0px 2px #323231,
       0px  3px 2px #323231,
      -3px  0px 2px #323231,
       0px -3px 2px #323231;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -3%;
}

/*声*/
#top-renewal2022 #block06 .case-list .case-list-2 article .voice{
margin: 0 auto 5%;
width: 100%;
font-size: 14px;
font-weight: 700;
color: #323231;
line-height: 1.3;
}

/*承認額*/
#top-renewal2022 #block06 .case-list .case-list-2 article .price{
margin: 2% auto;
width: 80%;
padding: 3% 0;
font-size: 20px;
font-weight: 700;
color: #bf0000;
border: solid 2px #bf0000;
border-radius: 50px;
}

/*詳細部分*/
#top-renewal2022 #block06 .case-list .case-list-2 article div{
margin: 0 auto;
width: 100%;
}

#top-renewal2022 #block06 .case-list .case-list-2 article ul{
margin: 0 auto;
width: 90%;
margin-bottom: -2%;
padding-right: 5%;

display: flex;
justify-content: center;
align-items:stretch;
flex-flow: row nowrap;

font-weight: 700;
}

#top-renewal2022 #block06 .case-list .case-list-2 article ul li:nth-of-type(1){
margin: 0 auto;
width: 45%;
padding: 3%;
font-size: 12px;
letter-spacing: 0.05em;
color: #fff;
background: #323231;
position: relative;
}

#top-renewal2022 #block06 .case-list .case-list-2 article ul li:nth-of-type(1) p{
margin: 0 auto;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

#top-renewal2022 #block06 .case-list .case-list-2 article ul li:nth-of-type(2){
margin: 0 auto;
text-align: left;
margin-left: -10px;
width: 55%;
padding: 0 2% ;
position: relative;
}

#top-renewal2022 #block06 .case-list .case-list-2 article ul li:nth-of-type(2)::after{
   content:"";
   display:block;
   width:100%;
   height:1px;
   background-color:#323231;
   position:absolute;
   bottom:2px;
   left:50%;
   transform: translateX(-50%);
}

#top-renewal2022 #block06 .case-list .case-list-2 article ul li:nth-of-type(2) p{
padding: 0 0 2px;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.05em;
}

/*テキストエリア*/
#top-renewal2022 #block06 .case-list .case-list-2 article .textarea{
margin: 7% auto 0;
width: 80%;
font-size: 11px;
line-height: 1.2;
text-align: justify;
}

/*切り替わりのドットを強制消去*/
#top-renewal2022 #block06 .slick-dots{display: none!important;}

/*スライダー切り替わり部分　高さを調整*/
#top-renewal2022 #block06>div.case-list > div > div > div.slick-list.draggable {
padding-top: 5%;
}

/* ******************************************* */
@media screen and (min-width: 1920px) {
 /* ---------------------------------- */
  /*真ん中のテキスト*/
#top-renewal2022 #block06 .text{font-size: 20px;}
#top-renewal2022 #block06 .text span{font-size: 20px;}

/*CASE 00*/
#top-renewal2022 #block06 .case-list .case-list-2 article .case-No{
font-size: 40px;
text-shadow: 
       5px  5px 4px #323231,
      -5px  5px 4px #323231,
       5px -5px 4px #323231,
      -5px -5px 4px #323231,
       5px  0px 4px #323231,
       0px  5px 4px #323231,
      -5px  0px 4px #323231,
       0px -5px 4px #323231;
}

/*声*/
#top-renewal2022 #block06 .case-list .case-list-2 article .voice{font-size: 20px;}

/*承認額*/
#top-renewal2022 #block06 .case-list .case-list-2 article .price{
padding: 2% 0;
font-size: 24px;
}
 
#top-renewal2022 #block06 .case-list .case-list-2 article ul li:nth-of-type(1){
margin: 5px auto;
width: 40%;
padding: 3%;
font-size: 18px;
}

#top-renewal2022 #block06 .case-list .case-list-2 article ul li:nth-of-type(2) p{
margin: 5px auto;
font-size: 18px;
}

/*テキストエリア*/
#top-renewal2022 #block06 .case-list .case-list-2 article .textarea{
font-size: 14px;
line-height: 1.3;
}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1920px) {
 /* ---------------------------------- */
/*CASE 00*/
#top-renewal2022 #block06 .case-list .case-list-2 article .case-No{
font-size: 33px;
top: -10px;
}

/*声*/
#top-renewal2022 #block06 .case-list .case-list-2 article .voice{font-size: 16px;}

/*承認額*/
#top-renewal2022 #block06 .case-list .case-list-2 article .price{font-size: 20px;}
 
#top-renewal2022 #block06 .case-list .case-list-2 article ul li:nth-of-type(1){
margin: 5px auto;
width: 40%;
padding: 3%;
font-size: 14px;
}

#top-renewal2022 #block06 .case-list .case-list-2 article ul li:nth-of-type(2) p{
margin: 5px auto;
font-size: 16px;
}

/*テキストエリア*/
#top-renewal2022 #block06 .case-list .case-list-2 article .textarea{
font-size: 14px;
line-height: 1.3;
}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1500px) {
 /* ---------------------------------- */
/*CASE 00*/
#top-renewal2022 #block06 .case-list .case-list-2 article .case-No{
font-size: 28px;
top: -10px;
}

/*声*/
#top-renewal2022 #block06 .case-list .case-list-2 article .voice{font-size: 15px;}

/*承認額*/
#top-renewal2022 #block06 .case-list .case-list-2 article .price{font-size: 18px;}
 
#top-renewal2022 #block06 .case-list .case-list-2 article ul li:nth-of-type(1){
margin: 5px auto;
width: 40%;
padding: 3%;
font-size: 12px;
}

#top-renewal2022 #block06 .case-list .case-list-2 article ul li:nth-of-type(2) p{
margin: 5px auto;
font-size: 14px;
}

/*テキストエリア*/
#top-renewal2022 #block06 .case-list .case-list-2 article .textarea{
font-size: 12px;
}

 /* ---------------------------------- */
}


/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
#top-renewal2022 #block06 .case-list .case-list-2 article{
width: 45%;
padding: 5% 0;
}

#top-renewal2022 #block06 .case-list .case-list-2{padding-top: 10%;}
#top-renewal2022 #block06 .case-list .case-list-2 article ul{width: 100%;}
#top-renewal2022 #block06 .case-list .case-list-2 article ul li:nth-of-type(1){width: 35%;}
#top-renewal2022 #block06 .case-list .case-list-2 article ul li:nth-of-type(2){
width: 65%;
font-size: 13px;
margin-left: -6%;
}

/*CASE 00*/
#top-renewal2022 #block06 .case-list .case-list-2 article .case-No{font-size: 30px;}
/*声*/
#top-renewal2022 #block06 .case-list .case-list-2 article .voice{margin-top: 4%;}
/*テキストエリア*/
#top-renewal2022 #block06 .case-list .case-list-2 article .textarea{width: 85%;}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
#top-renewal2022 #block06 .case-list .case-list-2 article .voice{margin: 7% auto;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 900px) {
 /* ---------------------------------- */
#top-renewal2022 #block06 .case-list .case-list-2 article{padding: 3% 0 5%;}
#top-renewal2022 #block06 .case-list .case-list-2 article ul li:nth-of-type(1){
font-size: 13px;
width: 25%;
}

#top-renewal2022 #block06 .case-list .case-list-2 article ul li:nth-of-type(2){margin-left: -3%;}
#top-renewal2022 #block06 .case-list .case-list-2 article .voice{margin: 3% auto;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
/*真ん中のテキスト*/
#top-renewal2022 #block06 .text{font-size: 13px;}
#top-renewal2022 #block06 .text span{font-size: 13px;}
#top-renewal2022 #block06 .case-list .case-list-2{padding-top: 5%;}
#top-renewal2022 #block06 .case-list .case-list-2 article{padding: 5% 0;}
#top-renewal2022 #block06 .case-list .case-list-2 article .voice{margin: 0 auto 5%;}
#top-renewal2022 #block06 .case-list .case-list-2 article ul li:nth-of-type(1){width: 40%;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 680px) {
 /* ---------------------------------- */
#top-renewal2022 #block06 .case-list{padding:8% 5% 5%;}
#top-renewal2022 #block06 .case-list .case-list-2 article{
width: 80%;
padding: 5% 0 7%;
margin-top: 5%;
}

#top-renewal2022 #block06 .case-list .case-list-2 article .voice{margin: 7% auto;}
#top-renewal2022 #block06 .case-list .case-list-2 article ul li:nth-of-type(1){width: 50%;}
#top-renewal2022 #block06 .case-list .case-list-2 article ul li:nth-of-type(2){margin-left: -6%;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#top-renewal2022 #block06 .case-list{padding: 10% 0;}
#top-renewal2022 #block06 .case-list .case-list-2 article ul li:nth-of-type(1){
font-size: 11px;
padding: 4% 0;
}

#top-renewal2022 #block06 .case-list .case-list-2 article ul li:nth-of-type(2)::after{bottom:4px;}
#top-renewal2022 #block06 .case-list .case-list-2 article ul li:nth-of-type(2) p{font-size: 12px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#top-renewal2022 #block06 .case-list .case-list-2 article{margin-top: 2%;}
/*真ん中のテキスト*/
#top-renewal2022 #block06 .text{font-size: 12px;}
#top-renewal2022 #block06 .text span{font-size: 12px;}
#top-renewal2022 #block06 .case-list .case-list-2{padding-top: 10%;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */

 /* ---------------------------------- */
}


/* ************************************************************
block07 NEWS+COLUMN呼び出し
************************************************************ */
#top-renewal2022 #block07{
margin: 0 auto;
width: 100%;
text-align: center;
background-image: url( "../img/top/block07-bg.jpg");
background-size:cover;
background-repeat: no-repeat;
background-position:center;
}

/*news+columnを囲う枠*/
#top-renewal2022 #block07 .blog-box{
margin: 0 auto;
width: 100%;
max-width: 1200px;
padding: 10% 5%;
display: flex;
justify-content: center;
align-items: stretch;
flex-flow: row wrap;
}

/*news　columnそれぞれの枠*/
#top-renewal2022 #block07 .blog-box .news-box,
#top-renewal2022 #block07 .blog-box .column-box{
margin: 0 auto;
width: 45%;
padding: 11% 3% 5%;
background: #fff;
border-radius: 20px;
position: relative;
}

#top-renewal2022 #block07 .sns-box{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -5%;
    padding-bottom: 5%;
    gap: 1%;
}
#top-renewal2022 #block07 .sns-box .sns-icon{
    height: 50px;
}

/*news　columnそれぞれの見出し*/
#top-renewal2022 #block07 .blog-box .news-box .news-midasi,
#top-renewal2022 #block07 .blog-box .column-box .column-midasi{
text-align: left;
margin-left: -50px;
width: 100%;
padding: 10px 50px;
font-size: 18px;
font-weight: 500;
color: #fff;
background: #44361a;
border-radius: 0 50px 50px 0;

position: absolute;
top: 20px;
left: 30px;
}

#top-renewal2022 #block07 .blog-box .news-box .news-midasi span,
#top-renewal2022 #block07 .blog-box .column-box .column-midasi span{
position: relative;
align-content: center;
font-size: 35px;
font-family: 'Bebas Neue', cursive;
color: #ffe233;
padding-right: 10%;

display: inline-block;
vertical-align: middle;
}

/*英語横の縦棒*/
#top-renewal2022 #block07 .blog-box .news-box .news-midasi span::after,
#top-renewal2022 #block07 .blog-box .column-box .column-midasi span::after{
content:"";
display:block;
width:3px;
height: 30px;
background:#fff;
position:absolute;
top:50%;
transform: translateY(-50%);
right: 13%;
}

/*記事読込部分　再調整*/
#top-renewal2022 #block07 .blog-box .list-top{
padding: 3% 0;
position: relative;
}

#top-renewal2022 #block07 .blog-box .list-top:nth-of-type(2){
border-top: 2px dotted #ffe233;
border-bottom: 2px dotted #ffe233;
}

#top-renewal2022 #block07 .blog-box .list-top::after{
content:"▶︎";
display:block;
font-size: 12px;
color:#2d2d2d;
position:absolute;
top:50%;
transform: translateY(-50%);
right: 10px;
}

#top-renewal2022 #block07 .blog-box .list-top li{
margin: 0 auto;
width: 100%;
text-align: left;

display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
}

#top-renewal2022 #block07 .blog-box .list-top li p{font-size: 14px;}
#top-renewal2022 #block07 .blog-box .list-top li .blog-date{width: 27%;}
#top-renewal2022 #block07 .blog-box .list-top li .blog-title{width: 70%;}
#top-renewal2022 #block07 .blog-box .list-top li p a{font-size: inherit;}


/*記事一覧へ　ボタン*/
#top-renewal2022 #block07 .blog-box .to-blog{
margin: 7% auto 0;
padding: 2% 2%;
width: 80%;
font-size: 16px;
font-weight: 500;
color: #2d2d2d;
background: #ffe233;
border: solid 2px #2d2d2d;
border-radius: 50px;
}

#top-renewal2022 #block07 .blog-box .to-blog::after{
content:"▶︎";
font-size: 14px;
padding-left: 12px;
}

#top-renewal2022 #block07 .blog-box .to-blog:hover{
font-weight: 700;
color: #ffe233;
background: #2d2d2d;
border: solid 2px #ffe233;
transition-duration: .5s;
}


/**メディアクエリ**/
/* *********** ******************************** */
@media screen and (max-width: 1500px) {
 /* ---------------------------------- */

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
 /*news　columnそれぞれの枠*/
#top-renewal2022 #block07 .blog-box .news-box,
#top-renewal2022 #block07 .blog-box .column-box{
padding: 11% 3% 5%;
}
 
/*news+columnを囲う枠*/
#top-renewal2022 #block07 .blog-box{padding: 10%;}
/*news　columnそれぞれの見出し*/
#top-renewal2022 #block07 .blog-box .news-box .news-midasi,
#top-renewal2022 #block07 .blog-box .column-box .column-midasi{
margin-left: -45px;
font-size: 17px;
}

#top-renewal2022 #block07 .blog-box .news-box .news-midasi span,
#top-renewal2022 #block07 .blog-box .column-box .column-midasi span{font-size: 35px;}


 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
/*news　columnそれぞれの枠*/
#top-renewal2022 #block07 .blog-box .news-box,
#top-renewal2022 #block07 .blog-box .column-box{
width: 45%;
padding: 12% 3% 5%;
}

/*news　columnそれぞれの見出し*/
#top-renewal2022 #block07 .blog-box .news-box .news-midasi,
#top-renewal2022 #block07 .blog-box .column-box .column-midasi{
padding: 10px 30px;
font-size: 14px;
}

#top-renewal2022 #block07 .blog-box .news-box .news-midasi span,
#top-renewal2022 #block07 .blog-box .column-box .column-midasi span{font-size: 30px;}

/*英語横の縦棒*/
#top-renewal2022 #block07 .blog-box .news-box .news-midasi span::after,
#top-renewal2022 #block07 .blog-box .column-box .column-midasi span::after{
width:2px;
height: 25px;
}
#top-renewal2022 #block07 .blog-box .list-top li p{font-size: 12px;}

#top-renewal2022 #block07 .blog-box .to-blog::after{font-size: 12px;}
/* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 900px) {
 /* ---------------------------------- */
 /*news　columnそれぞれの枠*/
#top-renewal2022 #block07 .blog-box .news-box,
#top-renewal2022 #block07 .blog-box .column-box{padding: 12% 3% 5%;}


#top-renewal2022 #block07 .blog-box .list-top li p{font-size: 11px;}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
/*news+columnを囲う枠*/
#top-renewal2022 #block07 .blog-box{
padding: 10% 5%;
flex-flow: column wrap;
}

/*news　columnそれぞれの枠*/
#top-renewal2022 #block07 .blog-box .news-box,
#top-renewal2022 #block07 .blog-box .column-box{
width: 70%;
padding: 15% 5% 5%;
}

#top-renewal2022 #block07 .blog-box .news-box{margin-bottom: 8%;}

/*news　columnそれぞれの見出し*/
#top-renewal2022 #block07 .blog-box .news-box .news-midasi,
#top-renewal2022 #block07 .blog-box .column-box .column-midasi{
font-size: 14px;
margin-left: -50px;
}

#top-renewal2022 #block07 .blog-box .news-box .news-midasi span,
#top-renewal2022 #block07 .blog-box .column-box .column-midasi span{
font-size: 35px;
padding-right: 7%;
}

#top-renewal2022 #block07 .blog-box .list-top li p{font-size: 13px;}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 680px) {
 /* ---------------------------------- */
/*news　columnそれぞれの見出し*/
#top-renewal2022 #block07 .blog-box .news-box .news-midasi,
#top-renewal2022 #block07 .blog-box .column-box .column-midasi{padding:12px 30px 10px;}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
/*news+columnを囲う枠*/
#top-renewal2022 #block07 .blog-box{padding: 10% 3%;}

/*news　columnそれぞれの枠*/
#top-renewal2022 #block07 .blog-box .news-box,
#top-renewal2022 #block07 .blog-box .column-box{padding: 17% 5% 5%;}

#top-renewal2022 #block07 .blog-box .news-box .news-midasi span,
#top-renewal2022 #block07 .blog-box .column-box .column-midasi span{padding-right: 10%;}

#top-renewal2022 #block07 .blog-box .list-top{padding: 2% 0;}
#top-renewal2022 #block07 .blog-box .list-top li p{font-size: 11px;}


 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
/*news　columnそれぞれの枠*/
#top-renewal2022 #block07 .blog-box .news-box,
#top-renewal2022 #block07 .blog-box .column-box{
width: 80%;
padding: 25% 5% 10%;
}

/*news　columnそれぞれの見出し*/
#top-renewal2022 #block07 .blog-box .news-box .news-midasi,
#top-renewal2022 #block07 .blog-box .column-box .column-midasi{
padding:10px 30px 8px;
font-size: 12px;
}

#top-renewal2022 #block07 .blog-box .news-box .news-midasi span,
#top-renewal2022 #block07 .blog-box .column-box .column-midasi span{font-size: 30px;}

#top-renewal2022 #block07 .blog-box .list-top li p{font-size: 10px;}

 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */


/*英語横の縦棒*/
#top-renewal2022 #block07 .blog-box .news-box .news-midasi span::after,
#top-renewal2022 #block07 .blog-box .column-box .column-midasi span::after{right: 10%;}

/* ---------------------------------- */
}

/* ************************************************************
block08
************************************************************ */
#block08{
text-align: center;
margin: 0 auto;
width: 100%;
padding-top: 10%;

background-image: url("../img/top/block08-bg.jpg");
background-size:cover;
background-repeat: no-repeat;
background-position:center;
}

/*h2下線　色のみ指定（他は一番上に）*/
#block08 h2::after{background: #fff;}

/*flex*/
#block08 .about-box{
margin: 0 auto;
padding: 5% 0;
width: 100%;
max-width: 768px;

display: flex;
justify-content: space-between;
align-items: center;
flex-flow: row wrap;
}

/*会社情報*/
#block08 .about-box .office{
text-align: left;
margin: 0 auto;
width: 40%;
line-height: 1.7;
letter-spacing: .05em;
}

#block08 .about-box .office h4{
margin-bottom: 5%;
font-size: 24px;
font-weight: 700;
}

#block08 .about-box .office .information{
font-size: 18px;
font-weight: 500;
}

/*map*/
#block08 .about-box .google-map{
margin: 0 auto;
width:  60%;
height: 250px;
}


/*会社案内ボタン*/
#block08 .to-about{
text-align: center;
margin: 5% 30% 0 0;
padding: 1% 2%;
width: 80%;
font-size: 20px;
font-weight: 500;
letter-spacing: 0.03em;
color: #ffe233;
background: #44361a;
border: solid 3px #ffe233;
border-radius: 50px;
}

#block08 .to-about::after{
content:"▶︎";
font-size: 17px;
padding-left: 15px;
}

#block08 .to-about:hover{
font-weight: 700;
color: #44361a;
background: #ffe233;
border: solid 3px #44361a;
transition-duration: .5s;
}


/**メディアクエリ**/
/* *********** ******************************** */
@media screen and (max-width: 1300px) {
 /* ---------------------------------- */
/*ご相談ボタン*/
#block08 .to-about{font-size: 19px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
 /*flex*/
#block08 .about-box{padding: 5%;}
/*map*/
#block08 .about-box .google-map{
width:  50%;
height: 230px;
}

#block08 .about-box .office h4{font-size: 22px;}
#block08 .about-box .office .information{font-size: 16px;}
/*会社案内ボタン*/
#block08 .to-about{
margin: 5% 20% 0 0;
width: 80%;
font-size: 18px;
}

#block08 .to-about::after{font-size: 15px;}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 680px) {
 /* ---------------------------------- */
/*ご相談ボタン*/
#block08 .to-about{padding: 2%;}

/*flex*/
#block08 .about-box{
width: 90%;
padding: 10% 5%;
flex-flow: column wrap;
}

/*会社情報*/
#block08 .about-box .office{
text-align: center;
width: 100%;
}

#block08 .about-box .office h4{
margin-bottom: 5%;
font-size: 24px;
font-weight: 700;
}

#block08 .about-box .office .information{
font-size: 18px;
font-weight: 500;
}

/*map*/
#block08 .about-box .google-map{
margin-top: 5%;
width:  100%;
height: 250px;
}

/*会社案内ボタン*/
#block08 .to-about{
margin: 7% auto;
padding: 1% 2%;
width: 300px;
}
 /* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#block08{padding-top: 15%;}
/*会社案内ボタン*/
#block08 .to-about{
margin: 10% auto;
width: 250px;
}
#block08 .about-box .office h4{font-size: 20px;}
#block08 .about-box .office .information{font-size: 16px;}
/*map*/
#block08 .about-box .google-map{margin-top: 7%;}
/* ---------------------------------- */
}

/* ******************************************* */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */
#block08 .about-box .office .information{font-size: 14px;}
/*map*/
#block08 .about-box .google-map{margin-top: 10%;}
/* ---------------------------------- */
}