@charset "utf-8";

/* CSS Document */

* { margin:0; padding:0; font-size:100%;}
*, *:before, *:after { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}

html { overflow-y:scroll; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}

body {
 margin:0; padding:0;
 font:16px/1.7 "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 color:#333;}

/*------------------------------------------------------------------------------
　共通
-------------------------------------------------------------------------------*/

div, pre, form, input, textarea, blockquote { margin:0; padding:0;}
address, caption, cite, code, dfn, em, var { font-style:normal;}

h1, h2, h3, h4, h5 { margin:0; padding:0; font-size:100%; line-height:1.2;}

ul, ol, li { margin:0; padding:0; list-style:none;}
img { max-width:100%; height:auto; vertical-align:top; border:none;}

i, em { color:#E50012; font-weight:normal; font-style:normal;}

p.note { color:#F00; font-weight:bold; font-size:14px; text-align:center;}
p.note strong { font-size:18px;}

/* リンク
-------------------------------------------------------------- */
a:link, a:visited { color:#333; text-decoration:underline;}
a:hover { text-decoration:none;}

/* PC・スマホ切り替え
-------------------------------------------------------------- */
.pc_img { display:block;}
.sp_img { display:none;}

@media screen and (max-width:468px) {
.pc_img { display:none;}
.sp_img { display:block;}
}

/*------------------------------------------------------------------------------
　レイアウト
-------------------------------------------------------------------------------*/

/* ヘッダー
-------------------------------------------------------------- */
#head { clear:both; width:100%; margin:0; padding:0; text-align:center; background:#FFF url(images/bg.png) no-repeat center bottom; background-size:100% auto;}
#head .headInner { clear:both; max-width:1260px; margin:0 auto; padding:0;}
#head .headInner img { width:80px; margin:0 auto;}
#head .headInner h1 { clear:both; margin:0; padding:0;}
#head .headInner h1 img { width:1260px;}

@media screen and (max-width:1260px) {
#head { background:#FFF url(none);}
#head .headInner { width:100%;}
}

@media screen and (max-width:769px) {
#head .headInner img { width:100%;}
#head .headInner h1 { width:100%; margin:0 auto;}
#head .headInner h1 img { width:100%;}
}

/* コンテナ
-------------------------------------------------------------- */
#container {
 clear:both; width:100%; margin:0; padding:0 0 425px 0; overflow:hidden;
 background:url(images/container_bg.jpg) no-repeat center bottom;}
#container .blockInner {
 clear:both; max-width:1100px; margin:0 auto; padding:0; overflow:hidden;}

@media screen and (min-width:1921px) {
#container { background-size:100% auto;}
}

@media screen and (max-width:1920px) {
#container { padding-bottom:25%; background-size:100% auto;}
}

@media screen and (max-width:1100px) {
#container .blockInner { width:calc(100% - 30px);}
}

@media screen and (max-width:769px) {
#container { padding-bottom:32%;}
}

/* フッター
-------------------------------------------------------------- */
#foot {
 clear:both; width:100%; margin:0; padding:0; overflow:hidden; text-align:center; background:#4e4e4e;}

#foot .footInner {
 clear:both; max-width:1100px; margin:0 auto; padding:50px 0 60px 0; overflow:hidden; color:#FFF;}
#foot .footInner h3 {
 clear:both; margin:0 0 20px 0!important; padding:0 0 10px 0; display:inline-block;
 font-size:28px; font-weight:bold; border-bottom:1px solid #FFF;}
#foot .footInner p { clear:both; margin:0; padding:0;}
#foot .footInner p.name { margin-bottom:15px; font-size:22px; line-height:1.4; font-weight:bold;}
#foot .footInner p.name br { display:none;}
#foot .footInner p.tel {
 margin-bottom:5px; padding-left:28px; display:inline-block; color:#FFF; font-size:28px; font-weight:bold;
 background:url(images/foot_tel.png) no-repeat left 8px;}
#foot .footInner p.tel a { color:#FFF; text-decoration:none;}
#foot .footInner p.tel a:hover { color:#FFF; text-decoration:none;}

#foot .copyright {
 clear:both; width:100%; margin:0; padding:20px 0 30px 0; overflow:hidden; background:#FFF;}

@media screen and (min-width:769px) {
#foot .footInner p.tel a[href^="tel:"] { pointer-events:none;}
}

@media screen and (max-width:1100px) {
#foot .footInner { width:calc(100% - 30px);}
}

@media screen and (max-width:768px) {
#foot .footInner { padding:30px 0;}
#foot .footInner h3 { margin-bottom:20px; font-size:24px;}
#foot .footInner p.name { margin-bottom:10px; font-size:18px;}
#foot .footInner p.tel { font-size:26px;}
#foot .footInner p.tel a { text-decoration:underline;}
#foot .copyright { padding:15px 0 20px 0;}
#foot .copyright img { width:180px;}
}

@media screen and (max-width:478px) {
#foot .footInner p.name br { display:inline-block;}
}

/*------------------------------------------------------------------------------
　コンテンツ
-------------------------------------------------------------------------------*/

/* 応募方法・賞品
-------------------------------------------------------------- */
#introduction {
 clear:both; width:100%; margin:0; padding:0; overflow:hidden; text-align:center;}

#introduction .blockInner { padding:40px 0 20px 0;}

#introduction img { clear:both; width:800px; margin:0 auto 60px auto; padding:0;}
#introduction img:last-child { width:auto; margin-bottom:0;}

@media screen and (max-width:768px) {
#introduction .blockInner { padding:30px 0 0 0;}
#introduction img { width:91.92%; margin:0 auto 40px auto;}
#introduction img:last-child { width:100%;}
}

@media screen and (max-width:468px) {
#introduction .blockInner { padding-top:20px;}
#introduction img { width:70%; margin-bottom:30px;}
}

/* 応募要項
-------------------------------------------------------------- */
#guideline {
 clear:both; width:100%; margin:0; padding:0;
 background:url(images/guideline_bg.png) no-repeat center top;}

#guideline .blockInner { padding:170px 0 60px 0;}

#guideline h2 {
 clear:both; width:100%; max-width:540px; margin:0 auto 45px auto; padding:15px 0 20px 0; display:block;
 text-align:center; color:#333; font-size:40px; font-weight:bold;
 background:url(images/guideline_h2.png) no-repeat center bottom;}

#guideline .guideList {
 clear:both; height:400px; margin:0; padding:30px 35px 0 0; overflow-y:scroll; background:#FFF;}
#guideline .guideList .box { clear:both; margin:0 0 30px 0; padding:0; overflow:hidden;}
#guideline .guideList .box h3 {
 clear:both; margin:0 0 20px 0; padding:0 0 7px 35px;
 color:#E50012; font-size:18px; font-weight:bold;
 border-bottom:1px solid #E50012;}
#guideline .guideList .box p { clear:both; margin:0 0 0 35px; padding:0;}
#guideline .guideList .box ul { clear:both; margin:0 0 0 35px; padding:0; overflow:hidden;}
#guideline .guideList .box ul li { clear:both; margin:0; padding:0 0 5px 17px; position:relative;}
#guideline .guideList .box ul li:last-child { padding-bottom:0;}
#guideline .guideList .box ul li:before {
 width:12px; height:12px; display:inline-block; position:absolute; top:6px; left:0;
 content:""; border-radius:50%; background-color:#333;}

.bannerBox { clear:both; margin:0; padding:0 0 30px 0; position:relative; overflow:hidden;}
.bannerBox .bnrLine {
 width:800px; height:110px; margin:0 auto; padding:31px 0 25px 0;
 display:block; position:relative; text-align:center;
 color:#FFF; font-size:34px; font-weight:bold; line-height:1.3; text-decoration:none;
 border-radius:20px; border:5px solid #FFF;
 background:#6DD900 url(images/guideline_line.png) no-repeat left 7% top 51%;}
.bannerBox .bnrLine:hover {
 background:#2DB200 url(images/guideline_line.png) no-repeat left 7% top 51%;}
.bannerBox .bnrLine, .bannerBox .bnrLine:hover {
 -webkit-transition:all .3s; transition:all .3s;}
.bannerBox .bnrLine br { display:none;}

#guideline .bannerBox { padding-top:75px;}
#guideline .bannerBox:before {
 width:0; height:0; margin:auto; display:block;
 position:absolute; top:0; right:0; left:0; z-index:100; content:"";
 border-width:40px 40px 0 40px; border-style:solid;
 border-color:#FFF transparent transparent transparent;}


@media screen and (max-width:1260px) {
.bannerBox { background:url(images/bg_bannar.png) no-repeat center top;}
.bgnone { background:url(none);}
}

@media screen and (max-width:860px) {
.bannerBox .bnrLine {
 width:90%; height:auto; padding:25px 0 20px 0; background-position:left 6% top 51%;}
.bannerBox .bnrLine:hover { background-position:left 6% top 51%;}
}

@media screen and (max-width:768px) {
#guideline { background-size:auto 100%;}
#guideline .blockInner { padding:130px 0 50px 0;}
#guideline h2 {
 margin-bottom:35px; padding-top:20px; font-size:36px; background-size:80% auto;}
#guideline .guideList { height:350px; padding:20px 10px 0 0;}
#guideline .guideList .box { margin:0 0 30px 0;}
#guideline .guideList .box h3 { margin-bottom:15px; padding-left:10px; font-size:16px;}
#guideline .guideList .box p { margin:0 0 0 10px; font-size:14px;}
#guideline .guideList .box ul { margin:0 0 0 10px;}
#guideline .guideList .box ul li { padding-left:15px; font-size:14px;}
#guideline .guideList .box ul li:before { width:10px; height:10px; top:6px;}

.bannerBox { padding-bottom:10px; background:url(none);}
#guideline .bannerBox { padding-top:65px;}
.bannerBox .bnrLine { padding:20px 20px 15px 60px; font-size:28px;}
}

@media screen and (max-width:578px) {
.bannerBox .bnrLine { padding-left:50px; font-size:24px;}
.bannerBox .bnrLine br { display:block;}
}

@media screen and (max-width:468px) {
#guideline h2 { font-size:28px;}
.bannerBox .bnrLine { padding-left:40px; font-size:20px;}
}

/* 出展住宅メーカー一覧
-------------------------------------------------------------- */
#maker {
 clear:both; width:100%; margin:0; padding:0; overflow:hidden; text-align:center;}

@media screen and (max-width:1800px) {
#maker { width:calc(100% - 30px); margin:0 auto;}
}




#header img {
    width: 120px;
    float: left;
    position: absolute;
}
@media only screen and (max-width: 767px){
    #header img {
        width: 80px;
    }
}

#header {
  list-style: none;
  /* overflow: hidden; */
  display: flex;
  background-color: #ff0000;
  height: 80px;
  position: fixed;
  z-index: 9999;
}
#header ul {
    list-style: none;
    text-align: right;
    width: 100vw;
    margin-right: 80px;
}
 
#header li {
    width: 140px;
    text-align: center;
    /* background-color: #333; */
    display: inline-block;
    color: #fff;
    height: 80px;
    line-height: 80px;
}
@media only screen and (max-width: 767px){
    #header li {
        display: none;
    }
}
 #header li.right {
    background-color: #191970;
 }
 @media only screen and (max-width: 767px){
    #header li.right {
        display: block;
        float: right;  
    }
 }

#header li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 20px;
}

#header li:hover{
    opacity: 0.8;
}




section.top_content .bg {
    position: relative;
    z-index: 0;
  }
section.top_content .bg::after{
    content: '';
    position: absolute;
    left:0;
    top: 0;

    /*四角形を傾けます*/
    transform: skewY(-5deg);
    transform-origin: bottom left;
    z-index: -9999;
    width:100%;
    height:900px;
    background:#ff0000;
}

section.top_content .top_image {
    width: 60%;
}

section.top_content .top_image img {
    max-width: none;
    /* width: 1500px; */
    width: 80%;
    position: absolute;
    left: -20%;
    top: 100px;
}
@media only screen and (max-width: 767px){
    section.top_content .top_image img {
        max-width: none;
        width: 200%;
        position: absolute;
        left: -100%;
        top: 350px;
    }
}
@media only screen and (max-width: 1380px){
    section.top_content .top_text {
        left: 50%;
        top: 190px;
    } 
    section.top_content img {
        left: 41%;

    }
}

section.top_content .top_text {
    position: absolute;
    top: 180px;
    left: 54%;
    z-index: 1;
    text-align: center;
}
@media only screen and (max-width: 767px){
    section.top_content .top_text {
        position: absolute;
        top: 120px;
        left:0;
        right: 0;

    }
}
section.top_content .top_text .bubble {
    margin-top: 50px;
}
@media only screen and (max-width: 767px){
    section.top_content .top_text .bubble {
        margin-top: 0px;
    }   
}
section.top_content img {
    width: 700px;
    position: absolute;
    top: 250px;
    left: 50%;
    z-index: -1;
}
@media only screen and (max-width: 767px){
    section.top_content .bg>img {
        display: none;
    }
}
section.top_content .top_text span{
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 5px;
}

@media only screen and (max-width: 1200px){
    section.top_content img {
        left: 39%;
    }
} 
@media only screen and (max-width: 1380px){
    section.top_content .top_text span{
        font-size: 1.4rem;
    }   
} 
@media only screen and (max-width: 767px){
    section.top_content .top_text span{
        font-size: 1.4rem;
    }   
}
section.top_content .top_text  h1{
    font-size: 3.8rem;
    letter-spacing: 8px;
}
@media only screen and (max-width: 767px){
    section.top_content .top_text  h1{
        font-size: 2.8rem;
        color: #fff;
        padding: 10px 0px;
    }   
}
section.top_content .top_text  p{
    font-size: 1.2rem;
    letter-spacing: 5px;
}
@media only screen and (max-width: 767px){
    section.top_content .top_text  p{
        font-size: 1.0rem;
        color: #fff;
    }  
}
@media only screen and (min-width: 768px){
    .sp {
        display: none;
    }
}
@media only screen and (max-width: 767px){
    .pc {
        display: none;
    }
}


/* 共通見出し */
.content_title .content_title_image {
    width: 200px;
}
@media only screen and (max-width: 767px){
    .content_title .content_title_image {
        left: -70px;
        position: relative;
    }
}
.content_title .content_title_text {
    width: 300px;
}
@media only screen and (max-width: 767px){
    .content_title .content_title_text {
        width: 100%;
        position: relative;
        top: -150px;
    }
}

.content_title  {
    width: 500px;
    height: 150px;
    background-color: #191970;
    margin-bottom: 100px;
    display: flex;
    flex-wrap: wrap;
    z-index: 9998;
    position: relative;
}
@media only screen and (max-width: 767px){
    .content_title  {
        width: 100%;
        margin-bottom: 0;
        
    }   
}
.content_title h1 {
    color: #fff;
    line-height: 50px;
    font-size: 2rem;
    display: table-cell;
    vertical-align: middle;
    height: 150px;
    width: 500px;
    text-align: right;
    padding-right: 20px;
    letter-spacing: 6px;
}
@media only screen and (max-width: 767px){
    .content_title h1 {
        padding-right: 10px;
        font-size: 1.6rem;
    } 
}

/* ここからコンテンツ１ */
section.content_1 {
    top: 800px;
    position: relative;
}
@media only screen and (max-width: 767px){
    section.content_1 {
        top: 930px;
    }
}
/* テキストと画像 */
section.content_1 .content_box {
    display: flex;
    flex-wrap: wrap;
    width: 1000px;
    margin: 0 auto;
    /* margin-top: 100px; */
}
@media only screen and (max-width: 767px){
    section.content_1 .content_box {
        width: 100%;
    }
}

/* コンテンツ１の左テキスト右画像 */
section.content_1 .content_box .content_box_text_left{
    width: 650px;
    padding: 50px;
}
@media only screen and (max-width: 767px){
    section.content_1 .content_box .content_box_text_left{
        width: 90%;
        margin: 0 auto;
        padding: 0px;
    }
}
section.content_1 .content_box .contetn_box_image_right{
    width: 350px;
}
@media only screen and (max-width: 767px){
    section.content_1 .content_box .contetn_box_image_right{
        width: 90%;
        margin: 0 auto;
        margin-top: 20px;
    }
}
/* コンテンツ１の左画像右テキスト */
section.content_1 .content_box .content_box_text_right{
    width: 650px;
    padding: 50px;
}
@media only screen and (max-width: 767px){
    section.content_1 .content_box .content_box_text_right{
        width: 90%;
        margin: 0 auto;
        padding: 0px;
    }
}
section.content_1 .content_box .contetn_box_image_left{
    width: 350px;
}
@media only screen and (max-width: 767px){
    section.content_1 .content_box .contetn_box_image_left{
        order: 2;
        widows: 90%;
        margin: 0 auto;
        margin-top: 20px;
    } 
}

/* コンテンツ１のボックス内共通 */
section.content_1 .content_box  h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    margin-top: 40px;
    letter-spacing: 8px;
}
section.content_1 .content_box  p {
    font-size: 1.1rem;
}


/* ここからコンテンツ２ */
section.content_2 {
    top: 1000px;
    position: relative;
}
@media only screen and (max-width: 767px){
    section.content_2 {
        top: 1050px;
    }   
}
.content_2_bg {
    position: relative;
    z-index: 0;
  }
.content_2_bg::after{
    content: '';
    position: absolute;
    left:0;
    top: 1100px;

    /*四角形を傾けます*/
    transform: skewY(-5deg);
    transform-origin: bottom left;
    z-index: -9999;
    width:100%;
    height:1800px;
    background:#ff0000;
}
@media only screen and (max-width: 767px){
    .content_2_bg::after{
        height: 2900px;
        top: 1000px;
    } 
}

/* テキストと画像 */
section.content_2 .content_box {
    display: flex;
    flex-wrap: wrap;
    width: 1000px;
    margin: 0 auto;
    /* margin-top: 100px; */
}
@media only screen and (max-width: 767px){
    section.content_2 .content_box {
        width: 100%;
    }
}


/* コンテンツ2の左テキスト右画像 */
section.content_2 .content_box .content_box_text_left{
    width: 650px;
    padding: 50px;
}
@media only screen and (max-width: 767px){
    section.content_2 .content_box .content_box_text_left{
        width: 90%;
        padding: 0px;
        margin: 0 auto;
    } 
}
section.content_2 .content_box .contetn_box_image_right{
    width: 350px;
}
@media only screen and (max-width: 767px){
    section.content_2 .content_box .contetn_box_image_right{
        width: 90%;
        margin: 0 auto;
    }
}

/* コンテンツ2の左画像右テキスト */
section.content_2 .content_box .content_box_text_right{
    width: 650px;
    padding: 50px;
}
@media only screen and (max-width: 767px){
    section.content_2 .content_box .content_box_text_right{
        width: 90%;
        padding: 0px;
        margin: 0 auto;
    } 
}
section.content_2 .content_box .contetn_box_image_left{
    width: 350px;
}
@media only screen and (max-width: 767px){
    section.content_2 .content_box .contetn_box_image_left{
        order: 2;
        width: 90%;
        margin: 0 auto;
    } 
}
/* コンテンツ2のボックス内共通 */
section.content_2 .content_box  h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    margin-top: 40px;
    letter-spacing: 8px;
    color: #fff;
}
section.content_2 .content_box  h2::first-letter {
    font-size: 3.8rem;
}
section.content_2 .content_box  p {
    font-size: 1.1rem;
    color: #fff;
}

/* コンテンツ2の最後の文章 */
section.content_2 .content_box_last {
    display: flex;
    flex-wrap: wrap;
    width: 800px;
    margin: 0 auto;
    /* margin-top: 100px; */
}
@media only screen and (max-width: 767px){
    section.content_2 .content_box_last {
        width: 90%;
    }
}

section.content_2 .content_box_last .content_box_text_left_last{
    width: 300px;
    /* padding: 50px; */
}
@media only screen and (max-width: 767px){
    section.content_2 .content_box_last .content_box_text_left_last{
        width: 100%;
    }   
}
section.content_2 .content_box_last .contetn_box_text_right_last{
    width: 500px;
}
section.content_2 .content_box_last .content_box_text_left_last p {
    font-size: 10.0rem;
    /* margin-bottom: 20px;
    margin-top: 40px;
    letter-spacing: 8px; */
    color: #fff;
    height: 230px;
}
@media only screen and (max-width: 767px){
    section.content_2 .content_box_last .content_box_text_left_last p {
        text-align: center;
    }   
}
/* section.content_2 .content_box  h2::first-letter {
    font-size: 3.8rem;
} */
section.content_2 .content_box_last .content_box_text_right_last  p {
    font-size: 3.0rem;
    color: #fff;
    margin-top: 55px;
}
@media only screen and (max-width: 767px){
    section.content_2 .content_box_last .content_box_text_right_last  p {
        font-size: 2.0rem;
        margin-top: 0px;
    }   
}
section.content_2 .content_box_last p {
    /* margin-top: -40px; */
    font-size: 1.4rem;
    color: #fff;
}




/* ここからコンテンツ３ */
section.content_3 {
    top: 1350px;
    position: relative;
}
@media only screen and (max-width: 767px){
    section.content_3 {
        top: 1250px;
    }
}
section.content_3 .bg {
    background-color: #ff0000;
    width: 90%;
    margin: 0 auto;
    top: -200px;
    position: relative;
    /* z-index: -9999; */
    padding-top: 80px;
    padding-bottom: 80px;
}
@media only screen and (max-width: 767px){
    section.content_3 .bg {
        top: -180px;
        padding-top: 200px;
    }
}
/* ステップ */
section.content_3 .content_box {
    display: flex;
    flex-wrap: wrap;
    width: 900px;
    margin: 0 auto;
    /* margin-top: 100px; */
}
@media only screen and (max-width: 767px){
    section.content_3 .content_box {
        width: 100%;
        padding-top: 0px;
    }
}
section.content_3 .content_box_left{
    width: 200px;
}
@media only screen and (max-width: 767px){
    section.content_3 .content_box_left{
        width: 100%;
        text-align: center;
    }
}
section.content_3 .content_box_center{
    width: 200px;
}
@media only screen and (max-width: 767px){
    section.content_3 .content_box_center{
        width: 80%;
        margin: 0 auto;
        margin-top: 10px;
    }
}
section.content_3 .content_box_right{
    width: 500px;
    padding: 20px;
}
@media only screen and (max-width: 767px){
    section.content_3 .content_box_right{
        width: 100%;
    }
}


/* コンテンツ3のボックス内共通 */
section.content_3 .content_box  h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    margin-top: 40px;
    letter-spacing: 3px;
    color: #fff;
}
@media only screen and (max-width: 767px){
    section.content_3 .content_box  h2 {
        margin-top: 0px;
    }
}
section.content_3 .content_box h3 {
    font-size: 3rem;
    color: #fff;
    margin-top: 80px;
}
@media only screen and (max-width: 767px){
    section.content_3 .content_box h3 {
        margin-top: 10px;
    }
}
section.content_3 .content_box h3>span {
    font-size: 2rem;
    letter-spacing: 5px;
}
section.content_3 .content_box p {
    font-size: 1.1rem;
    color: #fff;
}

section.content_3 .triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 25px 0 25px;
    border-color: #191970 transparent transparent transparent;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 20px;
}

section.content_3 .btn a {
    background-color: #191970;
    height: 80px;
    width: 200px;
    display: block;
    margin: 0 auto;
    text-align: center;
    border-radius: 40px;
    text-decoration: none;
}
section.content_3 .btn a:hover {
    opacity: 0.8;
}
section.content_3 .btn a>span {
    height: 80px;
    line-height: 80px;
    color: #fff;
    letter-spacing: 4px;
}
section.content_3 .btn {
    
    height: 80px;
    width: 200px;
    border-radius: 40px;
    margin: 0 auto;
    margin-top: 40px;
}
section.content_3 .btn:hover {
    background-color: #fff;
}



/* ここからコンテンツ４ */
section.content_4 {
    top: 1250px;
    position: relative;
}
@media only screen and (max-width: 767px){
    section.content_4 {
        top: 1150px;
    }
}
section.content_4 .bg {
    background-color: #ff0000;
    width: 100%;
    margin: 0 auto;
    top: -200px;
    position: relative;
    /* z-index: -9999; */
    padding-top: 120px;
    padding-bottom: 80px;
    
}
@media only screen and (max-width: 767px){
    section.content_4 .bg {
        padding-top: 200px;
    }
}

section.content_4 .bg .comment p {
    color: #fff;
    text-align: center;
    font-size: 1.6rem;
    padding-top: 50px;
    
}


/* プロフィール */
section.content_4 .bg>h3 {
    width: fit-content;
    background: #191970;
    top: 40px;
    position: relative;
    left: 220px;
    height: 60px;
    line-height: 60px;
    padding: 0 40px;
    color: #fff;
    letter-spacing: 2px;
}
section.content_4 .content_box0 {
    width: fit-content;
    margin: 0 auto;
}
section.content_4 .content_box0>h3 {
    width: fit-content;
    background: #191970;
    top: 45px;
    position: relative;
    left: -15px;
    height: 60px;
    line-height: 60px;
    padding: 0 40px;
    color: #fff;
    letter-spacing: 2px;
}
section.content_4 .content_box {
    display: flex;
    flex-wrap: wrap;
    width: 1000px;
    margin: 0 auto;
    background-color: #fff;
    /* margin-top: 40px; */
}
@media only screen and (max-width: 767px){
    section.content_4 .content_box {
        width: 90%;
    }
}
section.content_4 .content_box_left{
    width: 600px;
    padding: 30px;
}
@media only screen and (max-width: 767px){
    section.content_4 .content_box_left{
        width: 100%;
        order: 2;
        padding-top: 0px;
    }
}
section.content_4 .content_box_right{
    width: 400px;
    padding: 30px;
}
@media only screen and (max-width: 767px){
    section.content_4 .content_box_right{
        width: 100%;
        padding: 0px;
    }
}

/* コンテンツ4のボックス内共通 */
section.content_4 .content_box  h2 {
    font-size: 2.8rem;
    margin-bottom: 20px;
    margin-top: 20px;
    letter-spacing: 3px;
}
@media only screen and (max-width: 767px){
    section.content_4 .content_box  h2 {
        margin-bottom: 10px;
        margin-top: 10px;
        font-size: 2.2rem;
    }
}
section.content_4 .content_box h3 {
    font-size: 1.4rem;
    margin-top: 40px;
}
@media only screen and (max-width: 767px){
    section.content_4 .content_box h3 {
        font-size: 1.2rem;
        margin-top: 20px;
    }
}
@media only screen and (max-width: 767px){
    section.content_4 .content_box h3 {
        margin-top: 20px;
    }
}
section.content_4 .content_box h3>span {
    font-size: 2rem;
    letter-spacing: 5px;
}
section.content_4 .content_box p {
    font-size: 0.9rem;
}
@media only screen and (max-width: 767px){
    section.content_4 .content_box p {
        font-size: 1.0rem;
    }
}






/* ここからコンテンツ５ */
section.content_5 {
    top: 1150px;
    position: relative;
}
@media only screen and (max-width: 767px){
    section.content_5 {
        top: 1000px;
    }
}
section.content_5 .bg {
    background-color: #ff0000;
    width: 90%;
    margin: 0 auto;
    top: -200px;
    position: relative;
    /* z-index: -9999; */
    padding-top: 120px;
    padding-bottom: 80px;
}
@media only screen and (max-width: 767px){
    section.content_5 .bg {
        top: -30px;
        padding-top: 0px;
        padding-bottom: 40px;
    }
}
/* 文章 */
section.content_5 .content_box_last {
    display: flex;
    flex-wrap: wrap;
    width: 800px;
    margin: 0 auto;
    /* margin-top: 100px; */
}
@media only screen and (max-width: 767px){
    section.content_5 .content_box_last {
        width: 100%;
    }
}
section.content_5 .content_box_last .content_box_text_left_last{
    width: 200px;
    /* padding: 50px; */
}
@media only screen and (max-width: 767px){
    section.content_5 .content_box_last .content_box_text_left_last{
        width: 100%;
        text-align: center;
    }
}

section.content_5 .content_box_last .contetn_box_text_right_last{
    width: 600px;
}
@media only screen and (max-width: 767px){
    section.content_5 .content_box_last .contetn_box_text_right_last{
        width: 100%;
    }
}
section.content_5 .content_box_last .content_box_text_left_last p {
    font-size: 10.0rem;
    color: #fff;
    height: 230px;
}
section.content_5 .content_box_last .content_box_text_left_last p>span {
    font-size: 2.5rem;
    color: #fff;
    height: 230px;
}

section.content_5 .content_box_last .content_box_text_right_last  p {
    font-size: 2.2rem;
    color: #fff;
    margin-top: 45px;
    padding-left: 30px;
}
@media only screen and (max-width: 767px){
    section.content_5 .content_box_last .content_box_text_right_last  p {
        font-size: 1.4rem;
        color: #fff;
        margin-top: 0px;
        padding-left: 0px;
        margin: 0 auto;
        padding: 20px;
    }
}
section.content_5 .bg>p {
    /* margin-top: -40px; */
    font-size: 0.8rem;
    color: #fff;
    text-align: center;
}
@media only screen and (max-width: 767px){
    section.content_5 .bg>p {
        font-size: 0.9rem;
        text-align: left;
        padding: 20px;
        padding-top: 0px;
    }
}

/* ここからコンテンツ６ */
section.content_6 {
    top: 1050px;
    position: relative;
}
@media only screen and (max-width: 767px){
    section.content_6 {
        top: 1000px;
    }
}
section.content_6 .bg {
    background-color: #ff0000;
    width: 100%;
    margin: 0 auto;
    top: -200px;
    position: relative;
    /* z-index: -9999; */
    padding-top: 120px;
    padding-bottom: 80px;
    text-align: center;
}
@media only screen and (max-width: 767px){
    section.content_6 .bg {
        top: 0px;
        padding-top: 60px;
    }
}
section.content_6 .bg img {
    width: 900px;
}

section.content_6 .bg h3 {
    color: #fff;
    font-size: 3.2rem;
    letter-spacing: 8px;
    line-height: 80px;
}
@media only screen and (max-width: 767px){
    section.content_6 .bg h3 {
        font-size: 1.8rem;
        line-height: 60px;
    }
}
section.content_6 .bg p {
    color: #fff;
    font-size: 2.0rem;
    margin-top: 30px;
}
@media only screen and (max-width: 767px){
    section.content_6 .bg p {
        font-size: 1.6rem;
        margin-top: 10px;
    }
}

section.content_6 .btn a {
    background-color: #191970;
    height: 80px;
    width: 200px;
    display: block;
    margin: 0 auto;
    text-align: center;
    border-radius: 40px;
    text-decoration: none;
}
section.content_6 .btn a:hover {
    opacity: 0.8;
}
section.content_6 .btn a>span {
    height: 80px;
    line-height: 80px;
    color: #fff;
    letter-spacing: 4px;
}
section.content_6 .btn {
    
    height: 80px;
    width: 200px;
    border-radius: 40px;
    margin: 0 auto;
    margin-top: 40px;
}
section.content_6 .btn:hover {
    background-color: #fff;
}

#foot {
    background-color: #4e4e4e;
    top: 850px;
    position: relative;
    height: 200px;
    padding-top: 30px;
    color: #fff;
}
@media only screen and (max-width: 767px){
    #foot {
        top: 1000px;
        height: 100px;
    }
}
#foot a {
    color: #fff;
    text-decoration: none;
}
#foot p {
    margin-top: 20px;
}