@charset "utf-8";
/* =========================================================================================
Home
=========================================================================================*/
/*MAIN VISUAL*/
.main-visual{
    position: relative;
    height: 80vh;
    background-size: cover;
    overflow: hidden;
}
.main-visual .swiper-autoheight,
.main-visual .swiper-autoheight .swiper-slide{
    height: 80vh !important;
}
.swiper-button-next, .swiper-button-prev{
    color: #FFF !important;
}
.main-visual .catch {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1200px;
    z-index: 10;
}
.main-visual .catch span {
    display: block;
    text-align: center;
    max-width: 380px;
}
.main-visual .catch span.ja { 
    font-size:262.5%;
    font-weight: 600;
    color: #D74535;
    border-bottom: 4px solid #D74535;
}
.main-visual .catch span.en {
    padding: 10px 0;
    font-size: 130%;
    color: #000;
    letter-spacing:1px;
}

@media only screen and (max-width:820px){
    .main-visual ,
    .main-visual .swiper-autoheight,
    .main-visual .swiper-autoheight .swiper-slide{
        max-height: 820px;
    }
    .main-visual .catch {
        top: 75%;
        left: 50%;
        transform: translate(-50%, -80%);
        -webkit-transform: translate(-50%, -80%);
        -ms-transform: translate(-50%, -80%);
        max-width: 350px;
    }
    .main-visual .catch span { text-align:center; }
    .main-visual .catch span.ja { font-size:240%; padding: 7px 0;}
    .main-visual .catch span.en { font-size: 115%; padding: 5px 0; }
}
@media only screen and (max-width:468px){
    .main-visual ,
    .main-visual .swiper-autoheight,
    .main-visual .swiper-autoheight .swiper-slide{
        max-height: 375px;
    }
    .main-visual .catch { top: 90%; max-width: 300px; }
    .main-visual .catch span.ja { font-size:221%; padding: 5px 0; }
    .main-visual .catch span.en { font-size: 105%; }
}


/*information*/
.information {
    position: relative;
    margin-top: -80px;
    padding-top: 0;
    padding-inline: 30px !important;
    z-index: 10;
}
.information .inner{
    display: flex;
    align-items: stretch;
    gap: 4%;
    justify-content: space-between;
}
.information .inner .news,
.information .inner .technical{
    width: 48%;
    background: #FFF;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.information h2 {
    padding: 40px 40px 0;
    flex-grow: 1;
}
.information .info_list {
    padding: 0;
    margin: 0;
}
.information .info_list ul{
    height: 14em;
    margin: 30px 40px;
    overflow: auto;
}
.information .info_list li {
    display: flex;
    gap: 20px;
}
.information .info_list li + li {
    margin-top: 20px;
}
.information .info_list li a {
    color: #000;
    display: block;
    text-decoration: underline;
}
.information .info_list li a:hover {
    color:#D74535;
}
.information .info_list .day {
    width: 80px;
    font-size: 87.5%;
    color:#7E7E7E;
    margin-top: 0.2em;
}
.information .info_list .title {
    width: calc( 100% - 90px )
}
.information .info_list .cat {
    width: 95px;
    font-size: 75%;
    line-height:1.0;
    margin-top: 0.25em;
}
.information .info_list .cat a{
    color: #FFF;
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 8px 0;
}
.information .info_list .cat a:hover{
    color: #fff;
}
.information .info_list .nissan { background:#51A2AB;}
.information .info_list .literature { background:#5166AB;}
.information .info_list .mame { background:#AB7751;}

.information .btn {
    width: 100%;
    margin: 0;
    padding: 0;
}
.information .btn a {
    width: 100%;
    border: 2px solid #D74535;
    border-radius: 0 0 20px 20px;
}

@media only screen and (max-width:820px){
    .information .inner{ flex-wrap: wrap; gap:50px; }
    .information .inner .news,
    .information .inner .technical{ width: 100%;}
    .information .info_list ul{ height: auto; max-height: 14em; margin: 30px; }
}
@media only screen and (max-width:468px){
    .information { margin-top: 0; padding-inline: 20px !important; }
    .information .inner{ gap:20px; }
    .information h2 { padding: 40px 0 0; }
    .information .info_list ul{ margin: 30px 10px; }
    .information .info_list li { flex-direction: column; gap: 0; }
    .information .info_list .title { width: 100%; }
}

/* contents */
.bg_beige{
    padding-block: 150px 50px;
    padding-inline: 30px !important;
}

/* about */
.about .mid {
    position: relative;
    max-width: 820px;
    margin: 0 0 20px;
} 
.about .mid span {
    position: relative;
    display: block;
    padding: 40px 40px 30px;
    border:7px solid #D74535;
    border-radius: 100px;
    z-index:1;
} 
.about .mid span::before {
    display: block;
    clear: both;
    content:"";
    position: absolute;
    bottom: -20px;
    right:50px;
    width:50px;
    height: 30px;
    background:#fff url(../images/common/fukidashi.svg) no-repeat center center;
    background-size: auto 100%;
}
.about .mid::after {
    display: block;
    clear: both;
    content:"";
    position: absolute;
    bottom: -15px;
    right:-20px;
    width:100%;
    height:95%;
    background:#FFF;
    border-radius: 100px;
}
.about .mid b {
    display: block;
    margin-bottom: 10px;
    font-size: 1.2em;
    line-height: 1.6;
    width: fit-content;
    margin: 0 auto;
}
.about .mid small {
    font-size: 125%;
}
.about .photo {
    margin:10px auto 50px;
    display: flex;
    gap: 10%;
    align-items:baseline;
    justify-content: center;
}
.about .photo p img {
    max-width: 600px;
}
.about .photo p.since {
    max-width: 150px;
}
.about .photo img {
    width: 100%;
    height: auto;
}
.about .come {
    margin: auto;
    max-width: 850px;
}
@media only screen and (max-width:820px){
    .about .mid span { padding: 40px 40px 30px; border-radius: 80px; }
    .about .mid::after { right:-15px; height:98%; border-radius: 80px; }
    .about .photo p img { margin-top: 20px; }
}
@media only screen and (max-width:468px){
    .bg_beige{ padding-block: 80px; padding-inline: 20px !important; }
}


/* pickup */
.pickup {
    position: relative;
    margin-top: 100px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: start;
    gap: 2%;
}
.pickup .come {
    position: absolute;
    right: 0;
    width: 55%;
    max-width: 620px;
    padding: 50px;
    color: #FFF !important;
    background: #D74535;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: start;
}
.pickup h2 {
    width: 160px;
}
.pickup h2 span {
    color: #FFF !important;
}
.pickup .comment {
    width: fit-content;
}
.pickup .btn {
    margin-top: 15px;
}
.pickup .photo {
    width: 52%;
    display: flex;
    gap: 2%;
}
.pickup .photo div {
    width: 49%;
}
.pickup .photo div img {
    width: 100%;
    height: auto;
    border-radius: 20px;
}
.pickup:last-child{
    justify-content: right
}
.pickup:last-child .come{
    right: auto;
    left: 0;
}
.pickup:last-child .photo img{
    border:1px solid #D74535;
}

@media only screen and (max-width:1024px){
    .pickup .come { padding: 30px; }
}

@media only screen and (max-width:820px){
    .pickup { flex-wrap: wrap; }
    .pickup .come {
        position: static;
        width: 100%;
        max-width: 100%;
        padding: 30px;
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    .pickup h2 { width: 100%; }
    .pickup .btn { margin-top: 20px; }
    .pickup .photo { width: 100%; }
}
@media only screen and (max-width:468px){
    .pickup { margin-top: 70px; }
    .pickup h2{ flex-direction: column; align-items: center; gap: 2px;}
}


/* mail-magazine */
.mailmagazine {
    position: relative;
    padding-block: 250px 100px;
}
.mailmagazine .inner{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 6%;
}
.mailmagazine .inner .item{
    width: 47%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.mailmagazine h2 {
    position: relative;
    padding-left:160px;
}
.mailmagazine h2::before {
    content:"";
    position: absolute;
    top:-80px;
    left:-100px;
    width: 175px;
    aspect-ratio: 1 / 1;
    background: #D74535;
    border-radius: 50%;
    opacity: 0.15;
}
.mailmagazine h2::after {
    content:"";
    position: absolute;
    top:-15px;
    left: 0;
    width: 130px;
    height: 100px;
    background: url(../images/common/icon_mail_g.svg) no-repeat;
    background-size: contain;
}
.mailmagazine .mm_list {
    padding-bottom: 35px;
}
.mailmagazine .mm_list li + li  {
    margin-top: 10px;
}
.mailmagazine .mm_list li {
    padding-left: 20px;
    background: url(../images/common/arrow_right_r.svg) no-repeat left 10px;
    background-size: 7px auto;
}
.mailmagazine .mm_list a {
    color: #000;
}
.mailmagazine .mm_list a:hover {
    color: #D74535 ;
}

@media only screen and (max-width:820px){
    .mailmagazine { padding-block: 150px 100px;}
    .mailmagazine .inner { flex-wrap: wrap; justify-content: center; gap: 60px; }
    .mailmagazine .inner .item { width: 85%; }
    .mailmagazine .inner .item .btn a{ width: 100%; min-width: 100%; }
    .mailmagazine h2 { margin-bottom: 40px; padding-left:100px;}
    .mailmagazine h2::before { top:-62px; left:-40px; width:125px;}
    .mailmagazine h2::after { top:0; left: 0; width: 75px; height: 60px; background-size: 75px auto;}


}
@media only screen and (max-width:468px){
    .mailmagazine { padding-block: 120px 80px; padding-inline: 20px !important; }
    .mailmagazine .inner .item:first-child { width: 90%; }
    .mailmagazine .inner .item:last-child { width: 100%; }
    .mailmagazine .btn.backnumber a { min-width: 85% !important;} 
}














/*CONTENTS*/

@media only screen and (max-width:820px){

}
@media only screen and (max-width:468px){

}