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

/** --------------------------------------------------
共通部分
-------------------------------------------------- **/
.title{
margin: 0 auto;
width: 100%;
}

.title h2 span{
margin: 0 auto 35px;
padding: 10px 0;
width: 260px;
display: block;
font-size: 20px;
color: #fff;
background: #4e85c5;
border-radius: 50px;
}/*ティージーホームの*/

.title h2{
margin: 0 auto;
font-size: 40px;
color: #4e85c5;
}/*標準仕様*/

.title .Montserrat{
margin: 40px auto;
font-size: 35px;
font-weight: lighter;
color: #4e85c5;
letter-spacing: 0.05em;
opacity: .7;
}

.title .text{
font-size: 14px;
line-height: 1.5;
font-weight: normal;
}


/* *********** ******************************** */
@media screen and (max-width: 1700px) {
 /* ---------------------------------- */
.title h2 span{
margin: 0 auto 25px;
padding: 7px 0;
width: 200px;
font-size: 17px;
}/*ティージーホームの*/

.title h2{
font-size: 30px;
}/*標準仕様*/

.title .Montserrat{
margin: 25px auto;
font-size: 25px;
}

.title .text{
font-size: 12px;
}
 /* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
.title h2 span{
margin: 0 auto 20px;
padding: 5px 0;
width: 180px;
font-size: 15px;
}/*ティージーホームの*/

.title h2{
font-size: 26px;
}/*標準仕様*/

.title .Montserrat{
margin: 20px auto;
font-size: 20px;
}
 /* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
.title .text{
font-size: 11px;
}
 /* ---------------------------------- */
}




/** --------------------------------------------------
mainvisual
-------------------------------------------------- **/

#mainvisual{
margin: 0 auto;
width: 100%;
position: relative;
}

#mainvisual .mv-wrap{
margin: 0 auto;
width: 100%;
position: relative;

height: 100vh;
background-image: url( "../img/top/mv-bg@2x.jpg");
background-size:cover;
background-repeat: no-repeat;
background-position:center;
}

/*h1〜リンク*/
#mainvisual .mv-wrap article{
margin: 0 auto;
width: 100%;
position: absolute;
left: 10%;
top: 50%;
transform: translateY(-50%);
}

#mainvisual .mv-wrap article h1{
margin-bottom: 70px;
text-align: left;
font-size: 38px;
line-height: 1.5;
position: relative;
}

#mainvisual .mv-wrap article h1::after{
   content:"";
   display:block;
   width:1000px;
   height:4px;
   background-color:#fd9b00;
   position:absolute;
   bottom:-20px;
   left:0;
}

#mainvisual .mv-wrap article h2{
width: 90%;
text-align: left;
font-weight: bold;
color: #fd9b00;
font-size: 130px;
line-height: 1.1;
}

#mainvisual .mv-wrap article .link{
margin: 0;
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-flow: row wrap;
}

#mainvisual .mv-wrap article .link p a{
display: inline-block;
margin:50px 0 0 0;
padding: 20px 25px 20px 40px;
width: 300px;
font-size: 25px;
letter-spacing: .05em;
color: #fff;
background: #4e85c5;
border: solid 3px #fff;
border-radius: 50px;
position: relative;
transition: all .3s;
}

#mainvisual .mv-wrap article .link p a:hover{
color: #4e85c5;
background: #fff;
border: solid 3px #4e85c5;
transition: all .3s;
}

#mainvisual .mv-wrap article .link p a::after{
content: "▶︎";
font-size: 25px;
padding-left: 20px;
}

#mainvisual .mv-wrap article .link p:nth-of-type(1){margin-right:20px;}


/* *********** ******************************** */
@media screen and (max-width: 1920px) {
 /* ---------------------------------- */
/*h1〜リンク*/
#mainvisual .mv-wrap article{left: 7%;}

#mainvisual .mv-wrap article h1{
margin-bottom: 50px;
font-size: 28px;
}

#mainvisual .mv-wrap article h1::after{
   width:750px;
   height:3px;
   bottom:-10px;
}

#mainvisual .mv-wrap article h2{font-size: 90px;}

#mainvisual .mv-wrap article .link p a{
margin:50px 0 0 0;
padding: 15px 25px 15px 40px;
width: 270px;
font-size: 20px;
border: solid 2px #fff;
}

#mainvisual .mv-wrap article .link p a::after{
content: "▶︎";
font-size: 20px;
padding-left: 20px;
}

#mainvisual .mv-wrap article .link p:nth-of-type(1){margin-right:20px;}

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

/* *********** ******************************** */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
/*h1〜リンク*/
#mainvisual .mv-wrap article{left: 5%;}

#mainvisual .mv-wrap article h1{
margin-bottom: 40px;
font-size: 24px;
}

#mainvisual .mv-wrap article h1::after{
   width:630px;
   height:2px;
   bottom:-10px;
}

#mainvisual .mv-wrap article h2{font-size: 70px;}

#mainvisual .mv-wrap article .link p a{
margin:40px 0 0 0;
padding: 10px 25px 10px 40px;
width: 220px;
font-size: 18px;
}

#mainvisual .mv-wrap article .link p a::after{
content: "▶︎";
font-size: 18px;
padding-left: 20px;
}

#mainvisual .mv-wrap article .link p:nth-of-type(1){margin-right:20px;}
 /* ---------------------------------- */
}


/* *********** ******************************** */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
#mainvisual .mv-wrap article h1::after{width:400px;}
 /* ---------------------------------- */
}


/* *********** ******************************** */
@media screen and (max-width: 680px) {
 /* ---------------------------------- */
#mainvisual .mv-wrap{
background-image: url( "../img/top/mv-bg-mb@2x.jpg");
}

/*h1〜リンク*/
#mainvisual .mv-wrap article{
margin: 0 auto;
width: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
}

#mainvisual .mv-wrap article h1{
font-size: 20px;

position: absolute;
top: -310px;
left: 50%;
transform: translateX(-50%);

height: 400px;
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}

/*h1の下線を打ち消す*/#mainvisual .mv-wrap article h1::after{display: none;}

#mainvisual .mv-wrap article h2{
margin: 5% auto 2%;
width: 85%;
font-size: 14vw;
}

#mainvisual .mv-wrap article .link{
margin: 0 auto;
width: 100%;
justify-content: center;
flex-flow: row wrap;

}

#mainvisual .mv-wrap article .link p a{
width: 100%;
margin:0 auto;
padding: 12px 35px;
font-size: 17px;
}

#mainvisual .mv-wrap article .link p a::after{
font-size: 17px;
padding-left: 20px;
}

#mainvisual .mv-wrap article .link p:nth-of-type(1){margin-right:10px;}
 /* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#mainvisual .mv-wrap article h2{
width: 90%;
font-size: 15.5vw;
top: 50px;
}
 
#mainvisual .mv-wrap article .link{top: 90%;}
#mainvisual .mv-wrap article .link p a{
padding: 12px 40px;
font-size: 15px;
}

#mainvisual .mv-wrap article .link p a::after{
font-size: 15px;
padding-left: 10px;
}
/* ---------------------------------- */
}


/* *********** ******************************** */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#mainvisual .mv-wrap article h2{margin: 10% auto 5%;}

#mainvisual .mv-wrap article .link p a::after{padding-left: 5px;}
/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */
#mainvisual{padding-top: 40px;}
#mainvisual .mv-wrap article h1{
top: -270px;
font-size: 16px;
}

#mainvisual .mv-wrap article .link p a{
padding: 10px 20px;
}
/* ---------------------------------- */
}



/** --------------------------------------------------
block01
-------------------------------------------------- **/
#block01{
margin: 0 auto 20%;
width: 100%;
position: relative;
}

#block01::after{
   content:"";
   display:block;
   width:40%;
   height:3px;
   background-color:#fd9b00;
   position:absolute;
   bottom:-50px;
   right:0;
}

/*家のアイコン*/
.mv-icon{
width: 50px;
position: absolute;
top: -8%;
left: 50%;
transform: translateX(-50%);
}

#block01 article{
margin: 0 auto;
width: 100%;
position: relative;
}

#block01 article h2{
margin: 0 auto 20px;
padding-top: 350px;
width: auto;
height: 900px;
text-align: left;
font-size: 35px;
line-height: 1.7;
letter-spacing: 0.05em;
color: #fd9b00;
position: relative;
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}

#block01 article h2::before{
    content: url( "../img/top/block01-icon@2x.png");
    display: inline-block;
    vertical-align: middle;
    transform: scale(0.38);
    position: absolute;
    top: 60px;
    left: -60px;
}/*ニコちゃん*/


/*テキストブロック*/
#block01 article div{
margin: 0 auto;
width: 100%;
padding-left: 15%;
text-align: left;
}

#block01 article div h3{
margin: 0 auto;
width: 100%;
font-size: 27px;
position: relative;
}

#block01 article div h3::before{
    content: url( "../img/top/block01-h3@2x.png");
    display: inline-block;
    transform: scale(0.38);
    position: absolute;
    top: -140px;
    left: -140px;
    z-index: -1;
}

#block01 article div .text{
margin: 50px auto;
width: 100%;
font-size: 18px;
font-weight: normal;
line-height: 1.8;
}


/*飾り　absolute*/
#block01 .house,
#block01 .photo-pc01,
#block01 .photo-pc02{position: absolute;}

#block01 .house{
width: 500px;
top: -100px;
right: 50px;
}

#block01 .photo-pc01{
width: 450px;
top: 130px;
left: 150px;
}

#block01 .photo-pc02{
width: 550px;
bottom: 100px;
right: 0;
}


/********くわしくみるボタン********/
#block01 .viewmore a{
display:block;
text-align: center;
margin:0;
width: 250px;
font-size: 23px;
color: #fd9b00;
padding: 15px 30px;
border: 2px solid #fd9b00;
border-radius: 50px;
position: relative;
letter-spacing: 0.05em;
transition: all .5s;
}

#block01 .viewmore a:hover{
color: #fff;
background: #fd9b00;
border: 2px solid #fff;
transition: all .5s;
}

#block01 .viewmore a::after{
content: "▶︎";
font-size: 23px;
padding-left: 10px;
transition-duration: all .2s;
}

/* *********** ******************************** */
@media screen and (max-width: 1700px) {
 /* ---------------------------------- */
/*テキストブロック*/
#block01 article div{
padding-left: 10%;
}

#block01 article div h3{
font-size: 25px;
}

#block01 article div .text{
margin: 40px auto;
font-size: 16px;
}

/*飾り　absolute*/
#block01 .house{
width: 450px;
top: -100px;
right: 50px;
}

#block01 .photo-pc01{
width: 400px;
top: 100px;
left: 100px;
}

#block01 .photo-pc02{
width: 500px;
bottom: 120px;
}
/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 1500px) {
 /* ---------------------------------- */
#block01{
margin: 0 auto 25%;
}

#block01 article h2{
margin: 0 auto 40px;
padding-top: 350px;
height: 850px;
font-size: 30px;
}

#block01 article h2::before{
    transform: scale(0.35);
    top: 80px;
    left: -70px;
}/*ニコちゃん*/

#block01 article div h3{
font-size: 23px;
}

#block01 article div h3::before{
transform: scale(0.35);
}

#block01 article div .text{
margin: 40px auto;
font-size: 16px;
}

/*飾り　absolute*/
#block01 .house{
width: 350px;
top: -100px;
right: 50px;
}

#block01 .photo-pc01{
width: 350px;
}

#block01 .photo-pc02{
width: 420px;
bottom: 150px;
}

/********くわしくみるボタン********/
#block01 .viewmore a{
width: 225px;
font-size: 20px;
padding: 12px 25px;
}

#block01 .viewmore a::after{
font-size: 20px;
padding-left: 10px;
}
/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
#block01::after{
   width:50%;
   bottom:-50px;
}

/*飾り　absolute*/
#block01 .house{
width: 300px;
right: 35px;
}

#block01 .photo-pc01{
width: 300px;
top: 60px;
left: 60px;
}

#block01 .photo-pc02{
width: 420px;
}
/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
/*家のアイコン*/
.mv-icon{
top: -10%;
}

#block01 article h2{
margin: 0 auto 40px;
padding-top: 300px;
height: 700px;
font-size: 26px;
}

#block01 article h2::before{
    transform: scale(0.3);
    top: 50px;
    left: -80px;
}/*ニコちゃん*/

#block01 article div h3{
font-size: 18px;
}

#block01 article div h3::before{
transform: scale(0.3);
}

#block01 article div .text{
margin: 30px auto;
font-size: 12px;
}

/*飾り　absolute*/
#block01 .house{
width: 300px;
right: 35px;
}

#block01 .photo-pc01{
width: 250px;
top: 60px;
left: 60px;
}

#block01 .photo-pc02{
width: 300px;
bottom: 150px;
}

/********くわしくみるボタン********/
#block01 .viewmore a{
width: 200px;
font-size: 16px;
padding: 10px 20px;
}

#block01 .viewmore a::after{
font-size: 16px;
padding-left: 10px;
}
/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
#block01{
margin: 0 auto 35%;
}

#block01::after{
   width:50%;
   bottom:-100px;
}

#block01 article h2{
padding-top: 250px;
height: 580px;
font-size: 22px;
}

#block01 article h2::before{
    transform: scale(0.25);
    top: 25px;
    left: -85px;
}/*ニコちゃん*/

#block01 article div h3{
font-size: 16px;
}

#block01 article div .text{
margin: 30px auto;
font-size: 12px;
}

/*飾り　absolute*/
#block01 .house{
width: 230px;
top: -50px;
}

#block01 .photo-pc01{
width: 220px;
top: 30px;
left: 30px;
}

#block01 .photo-pc02{
width: 250px;
bottom: 140px;
}
/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 680px) {
 /* ---------------------------------- */
/*家のアイコン*/
.mv-icon{
position: relative;
top: 50px;
}

#block01 article h2{padding-top: 200px;}
#block01 article h2::before{top: -35px;}/*ニコちゃん*/

#block01 .house{
width: 230px;
top: -200px;
right: 5px;
}

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

/* *********** ******************************** */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#block01{
margin: 0 auto 40%;
}

#block01 article h2{
margin: 0 auto ;
padding-top: 230px;
height: 510px;
font-size: 28px;
}

#block01 article h2::before{
    transform: scale(0.3);
    top: -15px;
    left: -55px;
}/*ニコちゃん*/


#block01 article div{
padding-left: 0;
width: 80%;
}

#block01 article div h3{
font-size: 22px;
width: 100%;
text-align: center;
}

#block01 article div h3::before{
transform: scale(0.28);
top: -140px;
left: -10px;
}

#block01 article div .text{
margin: 40px auto;
width: 100%;
font-size: 14px;
text-align: justify;
}

#block01 article div .text br{display: none;}


#block01 .photo-mb{
margin: 0 auto 15%;
padding: 0 5%;
max-height: 600px;
}

#block01 .photo-mb img{width: 100%;}

#block01 .house{
top: -200px;
right: -35px;
}

/********くわしくみるボタン********/
#block01 .viewmore a{
margin: 0 auto;
width: 200px;
font-size: 16px;
}

#block01 .viewmore a::after{
font-size: 16px;
padding-left: 10px;
}

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

/* *********** ******************************** */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#block01{margin: 0 auto 45%;}

#block01 article div h3{text-align: left;}
#block01 article div h3::before{left: -50px;}
#block01 .house{right: -70px;}
/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */
#block01{margin: 0 auto 55%;}

#block01 article div h3::before{left: -80px;}
#block01 .house{
top: -150px;
right: -90px;
}
/* ---------------------------------- */
}



/** --------------------------------------------------
block02  TG HOME STYLE
-------------------------------------------------- **/
#block02{
margin: 0 auto;
width: 100%;
}

#block02 h2{
margin: 0 auto;
width: 100%;
font-size: 9vw;
font-weight: bold;
color: #fd9b00;
letter-spacing: 0.1em;
}

#block02 p:first-of-type{
margin: 10% auto 0;
text-align: left;
font-size: 16px;
font-weight: normal;
line-height: 2.2;
letter-spacing: 0.05em;

height: 450px;
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}

#block02 p img{width: 100%;}

/* *********** ******************************** */
@media screen and (max-width: 1500px) {
 /* ---------------------------------- */
#block02 h2{
letter-spacing: 0.07em;
}

#block02 p:first-of-type{
font-size: 14px;
height: 400px;
}
/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
#block02 p:first-of-type{
margin: 12% auto 0;
font-size: 14px;
height: 400px;
}
/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
#block02 p:first-of-type{
margin: 10% auto 0;
font-size: 12px;
height: 340px;
}
/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
#block02 p:first-of-type{
line-height: 2;
height: 300px;
}
/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#block02 h2{font-size: 10vw;}

#block02 p:first-of-type{
margin: 10% auto;
line-height: 1.5;
letter-spacing: 0.05em;
text-align: justify;

width: 80%;
height: auto;
writing-mode: horizontal-tb;
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: horizontal-tb;
}
/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */
#block02 p:first-of-type{
margin: 10% auto;
font-size: 11px;
width: 80%;
}
/* ---------------------------------- */
}


/** --------------------------------------------------
block03  標準仕様
-------------------------------------------------- **/
#block03{
margin: 7% auto;
width: 100%;
}

#block03 article{
margin: 0 auto;
width: 100%;
}

#block03 article .spec{
margin: 5% auto 10%;
width: 100%;
max-width: 1000px;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-flow: row wrap;
}

#block03 article .spec:last-of-type{margin-bottom: 0;}


#block03 article .spec h3{
margin: 0 auto 60px;
width: 100%;
padding: 15px 0;
font-size: 20px;
letter-spacing: 0.05em;
color: #4e85c5;
border: solid 2px #4e85c5;
}


#block03 article .spec dl{
margin: 10px 0;
width: 43%;
}

#block03 article .spec dl dt{
margin: 0 auto;
width: 100%;
}/*写真*/

/*写真の大きさ*/#block03 article .spec dl dt img{width: 100%;}

/*ここからメーカー、説明文*/
#block03 article .spec dl dd:nth-of-type(1){
margin: 15px auto;
padding: 7px 0;
text-align: center;
color: #fff;
font-size: 18px;
background: #4e85c5;
letter-spacing: 0.05em;
}

#block03 article .spec dl dd:nth-of-type(2){
width: 100%;
text-align: center;
color: #4e85c5;
font-size: 16px;
letter-spacing: 0.05em;
position: relative;
}

#block03 article .spec dl dd:nth-of-type(2)::after{
   content:"";
   display:block;
   width:100%;
   height:1px;
   background-color:#73d8ff;
   position:absolute;
   bottom:-15px;
   left:0;
}

#block03 article .spec dl dd:nth-of-type(3){
margin: 25px auto 50px;
text-align: justify;
font-size: 12px;
font-weight: normal;
line-height: 1.5;
letter-spacing: 0.05em;
}


/* *********** ******************************** */
@media screen and (max-width: 1200px) {
 /* ---------------------------------- */
#block03 article .spec{
margin: 7% auto 12%;
width: 70%;
}

#block03 article .spec h3{
margin: 0 auto 40px;
padding: 10px 0;
font-size: 18px;
}

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

/* *********** ******************************** */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
#block03{
margin: 10% auto;
}

#block03 article .spec{
margin: 7% auto 12%;
width: 80%;
}

#block03 article .spec dl{
margin: 10px 0;
width: 45%;
}
/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 680px) {
 /* ---------------------------------- */
#block03 article .spec h3{
margin: 0 auto 30px;
padding: 7px 0;
font-size: 16px;
}

/*ここからメーカー、説明文*/
#block03 article .spec dl dd:nth-of-type(1){
margin: 10px auto;
padding: 7px 0;
font-size: 16px;
}

#block03 article .spec dl dd:nth-of-type(2){
font-size: 14px;
}

#block03 article .spec dl dd:nth-of-type(3){
margin: 20px auto 50px;
font-size: 11px;
line-height: 1.3;
}
/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#block03{
margin: 15% auto;
}

#block03 article .spec{
margin: 7% auto 12%;
width: 85%;
}

#block03 article .spec dl{
margin: 10px 0;
width: 47%;
}
/* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#block03{
margin: 20% auto;
}

#block03 article .spec{
margin: 10% auto ;
width: 80%;
justify-content: center;
flex-flow: column wrap;
}

#block03 article .spec h3{
margin: 0 auto 20px;
padding: 10px 0;
}

#block03 article .spec dl{
margin: 10px 0;
width: 100%;
}

#block03 article .spec dl dd:nth-of-type(2){
font-size: 16px;
}

#block03 article .spec dl dd:nth-of-type(3){
margin: 25px auto 45px;
font-size: 12px;
}
/* ---------------------------------- */
}


/** --------------------------------------------------
block04  住宅瑕疵担保責任保険
-------------------------------------------------- **/
#block04{
margin: 0 auto;
width: 100%;
max-width: 1000px;
}

#block04 .title p:nth-of-type(2){
margin: 140px auto 60px;
width: 100%;
font-size: 26px;
padding: 20px 0;
color: #ffe86a;
background: #4e85c5;
letter-spacing:0.05em;
position: relative;
}

#block04 .title p:nth-of-type(2)::before{
   content:"";
   display:block;
   width:1.5px;
   height:50px;
   background:#4e85c5;
   position:absolute;
   top:-90px;
   left:50%;
   transform: translateX(-50%);
}

#block04 article{
margin: 0 auto;
width: 100%;
}

#block04 article h3{
margin-bottom: 50px;
font-size: 30px;
line-height: 1.5;
}

#block04 article h3 span{
display: block;
font-size: 50px;
font-weight: bold;
color: #fd9b00;
}

#block04 article .image-block{
margin: 0 auto;
padding: 70px 0;
width: 100%;
border-radius: 40px;
background: rgba(255,153,0,0.2);
position: relative;
}

#block04 article .image-block h2{
margin: 0 auto;
width: 60%;
padding: 15px 0;
font-size: 24px;
letter-spacing: 0.05em;
color: #fff;
background: #fd9b00;
border-radius: 50px;
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
}

#block04 article .image-block ul{
margin: 0 auto;
width: 70%;
}

#block04 article .image-block ul li:nth-of-type(1){
margin: 0 auto 40px;
width: 100%;
font-size: 22px;
line-height: 1.3;
position: relative;
}

#block04 article .image-block ul li:nth-of-type(1) span{
font-size: 25px;
color: #e00000;
}

#block04 article .image-block ul li:nth-of-type(1)::after{
   content:"";
   display:block;
   width:750px;
   height:2px;
   background:#fd9b00;
   position:absolute;
   bottom:-20px;
   left:50%;
   transform: translateX(-50%);
}

#block04 article .image-block ul li:nth-of-type(2){
margin: 0 auto;
width: 100%;
font-size: 16px;
text-align: justify;
line-height: 1.5;
font-weight: normal;
}

#block04 article .image-block .timing{
margin: 5% auto;
width: 70%;
padding: 13px 0;
font-size: 20px;
color: #fff;
background: #fd9b00;
border-radius: 10px;
letter-spacing: 0.05em;
}

#block04 article .image-block .timing span{
font-size: 16px;
line-height: 1.5;
font-weight: normal;
}

#block04 article .image-block .illust{
margin: 0 auto 5%;
width: 70%;
}

#block04 article .bottom-text{
margin: 0 auto;
width: 100%;
}

#block04 article .bottom-text p:nth-of-type(1){
font-size: 18px;
}

#block04 article .bottom-text p:nth-of-type(2){
margin: 50px auto 30px;
width: 70%;
padding: 15px 0;
font-size: 20px;
color: #fff;
background:#4e85c5;
border-radius: 50px;
}

#block04 article .bottom-text p:nth-of-type(3){
margin: 0 auto;
width: 55%;
text-align: justify;
font-size: 16px;
font-weight: normal;
line-height: 1.5;
letter-spacing: 0.05em;
position: relative;
}

#block04 article .bottom-text p:nth-of-type(3)::before,
#block04 article .bottom-text p:nth-of-type(3)::after{
   content:"";
   display:block;
   width:2px;
   height:100%;
   background:#4e85c5;
   position:absolute;
   transform: translateY(-50%);
   top:50%;
}
#block04 article .bottom-text p:nth-of-type(3)::before{left: -40px;}
#block04 article .bottom-text p:nth-of-type(3)::after{right: -40px;}


#block04 dl{
margin: 5% auto 13%;
width: 100%;
max-width: 1000px;
}

#block04 dl dt{
margin: 0 auto 10px;
width: 100%;
padding: 15px 0;
font-size: 22px;
color: #ffe86a;
background:#4e85c5;
letter-spacing: 0.05em;
}

#block04 dl dd{
text-align: justify;
margin: 0 auto 70px;
width: 70%;
font-size: 16px;
font-weight: normal;
line-height: 1.3;
letter-spacing: 0.03em;
}

#block04 dl dd:last-of-type{margin-bottom:0;}


/* *********** ******************************** */
@media screen and (max-width: 1500px) {
 /* ---------------------------------- */
#block04{
width: 90%;
}
 /* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 1024px) {
 /* ---------------------------------- */
#block04{
width: 85%;
}

#block04 .title p:nth-of-type(2){
margin: 80px auto 40px;
font-size: 18px;
padding: 10px 0;
}

#block04 .title p:nth-of-type(2)::before{
   height:30px;
   top:-55px;
}

#block04 article h3{
margin-bottom: 40px;
font-size: 20px;
}

#block04 article h3 span{
font-size: 35px;
}

#block04 article .image-block{
padding: 50px 0;
}

#block04 article .image-block h2{
width: 70%;
padding: 10px 0;
font-size: 18px;
}

#block04 article .image-block ul{
width: 80%;
}

#block04 article .image-block ul li:nth-of-type(1){
margin: 0 auto 40px;
font-size: 18px;
}

#block04 article .image-block ul li:nth-of-type(1) span{
font-size: 20px;
}

#block04 article .image-block ul li:nth-of-type(1)::after{
   width:100%;
   height:1.5px;
   bottom:-20px;
}

#block04 article .image-block ul li:nth-of-type(2){
width: 80%;
font-size: 14px;
}

#block04 article .image-block .timing{
padding: 10px 0;
font-size: 18px;
width: 80%;
}

#block04 article .image-block .timing span{
font-size: 14px;
}

#block04 article .image-block .illust{
width: 80%;
}

#block04 article .bottom-text p:nth-of-type(1){
font-size: 16px;
}

#block04 article .bottom-text p:nth-of-type(2){
margin: 20px auto;
padding: 10px 0;
font-size: 16px;
width: 80%;
}

#block04 article .bottom-text p:nth-of-type(3){
width: 65%;
font-size: 14px;
}

#block04 dl{
margin: 7% auto 13%;
}

#block04 dl dt{
padding: 10px 0;
font-size: 18px;
}

#block04 dl dd{
margin: 0 auto 50px;
width: 70%;
font-size: 14px;
}
 /* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 768px) {
 /* ---------------------------------- */
#block04 article .image-block .illust{
width: 90%;
}

#block04 article .bottom-text p:nth-of-type(1){
font-size: 14px;
}

#block04 article .bottom-text p:nth-of-type(2){
padding: 10px 0;
font-size: 14px;
width: 90%;
}

#block04 article .bottom-text p:nth-of-type(3){
width: 65%;
font-size: 12px;
}

#block04 dl{
margin: 5% auto 13%;
}

#block04 dl dt{
margin: 0 auto 15px;
padding: 7px 0;
font-size: 16px;
}

#block04 dl dd{
width: 80%;
font-size: 12px;
}
 /* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 680px) {
 /* ---------------------------------- */
#block04{
width: 85%;
}

#block04 article .image-block h2{
width: 80%;
}

#block04 article .image-block ul li:nth-of-type(2){
width: 80%;
font-size: 14px;
}

#block04 article .image-block .timing{
width: 70%;
}

#block04 article .image-block .timing span{
display: block;
margin-top: 10px;
font-size: 12px;
line-height: 1.3;
}

#block04 article .image-block .illust01{
margin: 0 auto 5%;
width: 40%;
}

#block04 article .image-block .illust02{
margin: 0 auto 5%;
width: 60%;
}


#block04 article .bottom-text p:nth-of-type(1){
line-height: 1.5;
}

#block04 article .bottom-text p:nth-of-type(2){
padding: 7px 0;
width: 70%;
line-height: 1.3;
}

#block04 article .bottom-text p:nth-of-type(3){
width: 55%;
font-size: 12px;
}

#block04 article .bottom-text p:nth-of-type(3)::before{left: -25px;}
#block04 article .bottom-text p:nth-of-type(3)::after{right: -25px;}
 /* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 600px) {
 /* ---------------------------------- */
#block04 article .image-block{
padding: 70px 0 50px;
}

#block04 article .image-block h2{
line-height: 1.3;
}

#block04 article .image-block ul li:nth-of-type(1){
font-size: 16px;
}

#block04 article .image-block ul li:nth-of-type(1) span{
font-size: 18px;
}

#block04 article .image-block ul li:nth-of-type(2){
width: 100%;
font-size: 12px;
}

#block04 article .image-block .timing{
width: 80%;
}

#block04 article .image-block .illust01{
width: 50%;
}

#block04 article .image-block .illust02{
width: 75%;
}

#block04 article .bottom-text p:nth-of-type(2){
width: 80%;
}

#block04 article .bottom-text p:nth-of-type(3){
width: 65%;
}

#block04 dl{
margin: 10% auto 13%;
}
 /* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 480px) {
 /* ---------------------------------- */
#block04 article .image-block ul{
width: 85%;
}

#block04 article .image-block ul li:nth-of-type(1){
font-size: 14px;
}

#block04 article .image-block ul li:nth-of-type(1) span{
font-size: 16px;
}

#block04 article .image-block .timing{
margin:25px auto;
width: 85%;
}

#block04 article .image-block .illust02{
margin: 0 auto 10%;
}

#block04 article .bottom-text p:nth-of-type(2){
width: 90%;
}

#block04 article .bottom-text p:nth-of-type(3){
width: 70%;
}

#block04 dl dd{
width: 90%;
}
 /* ---------------------------------- */
}

/* *********** ******************************** */
@media screen and (max-width: 380px) {
 /* ---------------------------------- */
#block04 article .image-block .timing span{
font-size: 11px;
}

#block04 article .bottom-text p:nth-of-type(1){
font-size: 13px;
}

#block04 article .bottom-text p:nth-of-type(2){
font-size: 13px;
}
 /* ---------------------------------- */
}