@charset "utf-8";

@media print, screen and (min-width : 769px){
/*------------------------------------------------------------------------------------------
*
*
    Responsive / PC
*
*
------------------------------------------------------------------------------------------ */

#talkroom{
font-size: 18px;
-webkit-font-smoothing: antialiased;
}

#talkroom .switch_sp{
display: none;
}

#talkroom #mainvisual_area img,#talkroom .cnt_area img{
width: 100%;
height: auto;
}

#talkroom #mainvisual_area img:not(.switch_sp),
#talkroom .cnt_area img:not(.switch_sp){
display: block;
}

.cnt_area .h2_box{
margin: 0 auto 39px;
}

.cnt_area .h2_box .subtitle{
position: relative;
max-width: 210px;
width: 100%;
height: 50px;
margin: 0 auto 20px;
}

.cnt_area .h2_box .subtitle .ttl {
position: absolute;
top: 410px;
left: 50%;
transform: translate(-50%, -50%) rotate(-10deg);
width: 820px;
height: 820px;
opacity: 0;
transition: .4s ease-out .3s;
}

.cnt_area .h2_box .subtitle.on .ttl {
transform: translate(-50%, -50%);
opacity: 1;
}

.cnt_area .h2_box .subtitle .ttl span {
display: block;
max-width: 210px;
width: 100%;
margin: 0 auto;
}

.cnt_area .h2_box .subtitle .line {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
overflow: hidden;
}

.cnt_area .h2_box .subtitle .line::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) rotate(-65deg);
width: 732px;
height: 732px;
border-radius: 50%;
border: 1.5px solid #fff;
border-top-color: #DC966E;
transition: .3s ease-out;
}

.cnt_area .h2_box .subtitle.on .line::before {
transform: translateX(-50%) rotate(-25deg);
}

.cnt_area .h2_box .subtitle .line::after {
content: "";
position: absolute;
width: 6.5px;
height: 6px;
background-color: #fff;
top: 4px;
right: 38px;
transform: rotate(12deg);
}

.cnt_area .h2_box .subtitle .line span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.cnt_area .h2_box .subtitle .line span::before,
.cnt_area .h2_box .subtitle .line span::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 8px;
height: 8px;
border-radius: 50%;
border: 1.5px solid #DC966E;
background-color: #fff;
opacity: 0;
transition: .2s;
}

.cnt_area .h2_box .subtitle .line span::after {
right: 0;
left: auto;
transition-delay: .2s;
}

.cnt_area .h2_box .subtitle.on .line span::before,
.cnt_area .h2_box .subtitle.on .line span::after {
opacity: 1;
}

.cnt_area .h2_box .subtitle_ptn02 .line::before {
border-top-color: #F2976C;
}

.cnt_area .h2_box .subtitle_ptn02 .line span::before,
.cnt_area .h2_box .subtitle_ptn02 .line span::after {
border-color: #F2976C;
}

.cnt_area .h2_box h2{
width: 100%;
margin: 0 auto;
}

.cnt_area .catchcopy{
font-size: 30px;
line-height: 1.1;
letter-spacing: 0.065em;
text-align: center;
margin-bottom: 36px;
font-family:  'HondaGlobalFontJP-Bold';
}

#talkroom .fixed_none {
display: flex;
position: fixed;
z-index: 99;
right: 80px;
bottom: 78px;
width: 272px;
height: 82px;
border-radius: 12px;
border: 1px solid #000;
box-shadow: 1px 1px 6px rgba(0,0,0,.4);
background-color: #fff;
transition: .2s ease;
}

#talkroom .fixed_none.hide {
opacity: 0;
pointer-events: none;
}

#talkroom .fixed_none .close_btn {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 30px;
padding: 0 0 8px 4px;
cursor: pointer;
}

#talkroom .fixed_none .close_btn span {
position: relative;
}

#talkroom .fixed_none .close_btn span::before,
#talkroom .fixed_none .close_btn span::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 15px;
height: 1px;
border-radius: 1px;
background-color: #000;
transform: translate(-50%, -50%) rotate(45deg);
}

#talkroom .fixed_none .close_btn span::after {
transform: translate(-50%, -50%) rotate(-45deg);
}

#talkroom .fixed_none .car_box {
display: flex;
align-items: flex-end;
justify-content: center;
width: 108px;
padding-right: 5px;
}

#talkroom .fixed_none .car_box .car {
width: 83px;
}

#talkroom .fixed_none .car_box .car img {
display: block;
width: 100%;
height: auto;
}

#talkroom .fixed_none .text_box {
position: relative;
width: calc(100% - 108px);
}

#talkroom .fixed_none .text_box::before {
content: "";
position: absolute;
top: -.5px;
right: 100%;
width: 16px;
height: calc(100% + 1px);
background: url(../image/fukidashi_none_message_parts.png) no-repeat right top / auto 100%;
}

#talkroom .fixed_none .text_box .txt {
display: none;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
padding: 0 18px;
font-size: 14px;
letter-spacing: -.03em;
line-height: 22px;
pointer-events: none;
overflow: hidden;
}

#talkroom .fixed_none .text_box .txt span {
display: inline-block;
opacity: 0;
transform: rotateX(-30deg);
transform-origin: center center 25px;
transition: .45s cubic-bezier(0.6, 0, 0.7, 0.2);
}

#talkroom .fixed_none .text_box .txt span:nth-child(1) { transition-delay: 0.30s; }
#talkroom .fixed_none .text_box .txt span:nth-child(2) { transition-delay: 0.35s; }
#talkroom .fixed_none .text_box .txt span:nth-child(3) { transition-delay: 0.40s; }
#talkroom .fixed_none .text_box .txt span:nth-child(4) { transition-delay: 0.45s; }
#talkroom .fixed_none .text_box .txt span:nth-child(5) { transition-delay: 0.50s; }
#talkroom .fixed_none .text_box .txt span:nth-child(6) { transition-delay: 0.55s; }
#talkroom .fixed_none .text_box .txt span:nth-child(7) { transition-delay: 0.60s; }
#talkroom .fixed_none .text_box .txt span:nth-child(8) { transition-delay: 0.65s; }
#talkroom .fixed_none .text_box .txt span:nth-child(9) { transition-delay: 0.70s; }
#talkroom .fixed_none .text_box .txt span:nth-child(10) { transition-delay: 0.75s; }
#talkroom .fixed_none .text_box .txt span:nth-child(11) { transition-delay: 0.80s; }
#talkroom .fixed_none .text_box .txt span:nth-child(12) { transition-delay: 0.85s; }
#talkroom .fixed_none .text_box .txt span:nth-child(13) { transition-delay: 0.90s; }
#talkroom .fixed_none .text_box .txt span:nth-child(14) { transition-delay: 0.95s; }
#talkroom .fixed_none .text_box .txt span:nth-child(15) { transition-delay: 1.00s; }

#talkroom .fixed_none .text_box .txt.on {
pointer-events: auto;
}

#talkroom .fixed_none .text_box .txt.on span {
opacity: 1;
transform: rotateX(0);
}

#talkroom .fixed_none .text_box .txt.off span {
transform: rotateX(20deg);
transition: 0;
}

#talkroom .fixed_none .text_box .txt.off span:nth-child(1) { transition-delay: 0.00s; }
#talkroom .fixed_none .text_box .txt.off span:nth-child(2) { transition-delay: 0.05s; }
#talkroom .fixed_none .text_box .txt.off span:nth-child(3) { transition-delay: 0.10s; }
#talkroom .fixed_none .text_box .txt.off span:nth-child(4) { transition-delay: 0.15s; }
#talkroom .fixed_none .text_box .txt.off span:nth-child(5) { transition-delay: 0.20s; }
#talkroom .fixed_none .text_box .txt.off span:nth-child(6) { transition-delay: 0.25s; }
#talkroom .fixed_none .text_box .txt.off span:nth-child(7) { transition-delay: 0.30s; }
#talkroom .fixed_none .text_box .txt.off span:nth-child(8) { transition-delay: 0.35s; }
#talkroom .fixed_none .text_box .txt.off span:nth-child(9) { transition-delay: 0.40s; }
#talkroom .fixed_none .text_box .txt.off span:nth-child(10) { transition-delay: 0.45s; }
#talkroom .fixed_none .text_box .txt.off span:nth-child(11) { transition-delay: 0.50s; }
#talkroom .fixed_none .text_box .txt.off span:nth-child(12) { transition-delay: 0.55s; }
#talkroom .fixed_none .text_box .txt.off span:nth-child(13) { transition-delay: 0.60s; }
#talkroom .fixed_none .text_box .txt.off span:nth-child(14) { transition-delay: 0.65s; }
#talkroom .fixed_none .text_box .txt.off span:nth-child(15) { transition-delay: 0.70s; }



/* ------------------------------------------------------------
*
    #main_visual
*
------------------------------------------------------------ */

#mainvisual_area{
background-color: #EAECED;
}

#mainvisual_area .l-container__inner{
padding-top: 20px;
padding-bottom: 44px;
}

#mainvisual_area .h1_box{
position: relative;
margin: 0 auto;
}

#mainvisual_area .h1_subtitle{
position: absolute;
z-index: 1;
top: 32px;
left: 0;
right: 0;
margin: 0 auto;
font-size: 30px;
letter-spacing: 0.105em;
line-height: 1;
color: #6E82D2;
text-align: center;
font-family:  'HondaGlobalFontJP-Bold';
}

#mainvisual_area h1{
position: relative;
max-width: 620px;
width: 100%;
margin: 0 auto;
}

#mainvisual_area h1 .parts > *:not(.bg) {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: .4s ease-out;
}

#mainvisual_area h1 .parts .n {
transform: translateX(-20px);
transition-duration: .6s;
}
#mainvisual_area h1 .parts .talk {
transform: translateY(20px);
transition-delay: .3s;
}
#mainvisual_area h1 .parts .room {
transform: translateY(30px);
transition-duration: .6s;
transition-delay: .5s;
}

#mainvisual_area h1.on .parts .n {
transform: translateX(0);
opacity: 1;
}
#mainvisual_area h1.on .parts .talk,
#mainvisual_area h1.on .parts .room {
transform: translateY(0);
opacity: 1;
}

#mainvisual_area .icon{
position: absolute;
opacity: 0;
transform: scale(0);
transition: .3s cubic-bezier(0.6, 0, 0.7, 0.2);
}

#mainvisual_area .icon.on {
transform: scale(1);
opacity: 1;
}

#mainvisual_area .icon01{
max-width: 56px;
width: 100%;
top: 51px;
left: 152px;
transition-delay: 1s;
}

#mainvisual_area .icon02{
max-width: 42px;
width: 100%;
top: 170px;
left: 85px;
transition-delay: 1.3s;
}

#mainvisual_area .icon03{
max-width: 77px;
width: 100%;
top: 59px;
right: 73px;
transition-delay: 1.15s;
}

#mainvisual_area .catchcopy{
text-align: center;
font-size: 24px;
letter-spacing: 0.1em;
line-height: 39px;
margin: 33px 0 57px;
font-family:  'HondaGlobalFontJP-Bold';
}

#mainvisual_area .page_nav{
max-width: 302px;
width: 100%;
margin: 0 auto;
padding: 13px 0 13px 4px;
list-style: none;
position: relative;
}

#mainvisual_area .page_nav::before{
content: "";
display: block;
width: 1px;
height: 100%;
background-color: #6E82D2;
position: absolute;
top: 0;
left: calc(4px + 20px);
}

#mainvisual_area .page_nav li{
display: flex;
align-items: start;
margin-bottom: 24px;
background-color: #EAECED;
position: relative;
z-index: 1;
cursor: pointer;
}

#mainvisual_area .page_nav li:last-of-type{
margin-bottom: 0;
}



/* ------------------------------------------------------------
*
    #n-one ranking
*
------------------------------------------------------------ */

#none_ranking{
padding-top: 134px;
}

#none_ranking .l-container__inner{
padding-top: 0;
padding-bottom: 0;
}

#none_ranking .h2_box h2{
max-width: 392px;
}

#none_ranking .cnt_block{
background-color: #ddd;
padding: 15px 0;
position: relative;
}

#none_ranking .bg_ptn01{
background-color: #E4D8BD;
}

#none_ranking .bg_ptn02{
background-color: #DDDACF;
}

#none_ranking .cnt_block .number_box{
max-width: 140px;
width: 100%;
margin: 0 auto;
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
}

#none_ranking .cnt_block .cnt_g{
max-width: 950px;
width: 100%;
margin: 0 auto;
background-color: #FFFFFF;
padding-bottom: 50px;
position: relative;
}

#none_ranking .cnt_block .curve_ttl {
position: relative;
width: 100%;
margin: 0 auto;
}

#none_ranking .cnt_block .curve_ttl .curve {
position: absolute;
left: 50%;
transform: translate(-50%, -50%) rotate(-20deg);
opacity: 0;
transition: .4s ease-out;
}

#none_ranking .cnt_block .curve_ttl.on .curve {
transform: translate(-50%, -50%);
opacity: 1;
}

#none_ranking .cnt_block .curve_ttl h3 {
width: 100%;
margin: 0 auto;
}

#none_ranking .cnt_block .fukidashi{
position: absolute;
background-repeat: no-repeat;
background-position: center top;
background-size: 100% auto;
}

#none_ranking .cnt_block .fukidashi p{
font-size: 21px;
line-height: 30px;
}

#none_ranking .cnt_block .fukidashi p .attention_text{
display: block;
font-size: 12px;
letter-spacing: -0.05em;
}

#none_ranking .cnt_block .fukidashi p .en_font{
font-weight: 400;
}

#none_ranking .cnt_block .btn_ptn01{
max-width: 368px;
width: 100%;
margin: 0 auto;
}

#none_ranking .cnt_block .btn_ptn01 a{
display: block;
width: 100%;
border-radius: 30px;
border: 5px solid #C8AA78;
background-color: #646464;
color: #fff;
text-decoration: none;
text-align: center;
position: relative;
font-size: 14px;
letter-spacing: 0.1em;
padding: 10px 5px 8px 50px;
transition: .3s;
}

#none_ranking .cnt_block .btn_ptn01 a:hover {
opacity: .7;
}

#none_ranking .cnt_block .btn_ptn01 a::before{
content: "";
display: block;
width: 22px;
height: 24px;
background: url(../image/arrow_right_white.png) no-repeat center center/100% auto;
position: absolute;
top: 50%;
left: 30px;
transform: translateY(-50%);
}

#none_ranking .cnt_block .btn_ptn01 a span{
display: inline-block;
vertical-align: middle;
}

#none_ranking .cnt_block .btn_ptn01 a .big_text{
font-size: 24px;
letter-spacing: 0.05em;
margin-right: 3px;
}

#none_ranking .bg_ptn02 .btn_ptn01 a{
border-color: #CDA082;
}





#none_ranking .ranking_ptn01 .cnt_g{
padding-top: 158px;
}

#none_ranking .ranking_ptn01 .curve_ttl {
max-width: 264px;
height: 98px;
margin-bottom: 14px;
}

#none_ranking .ranking_ptn01 .curve_ttl .curve {
top: 170px;
width: 340px;
height: 340px;
}

#none_ranking .ranking_ptn01 .curve_ttl h3 {
max-width: 264px;
}

#none_ranking .ranking_ptn01 .cnt_img{
max-width: 522px;
width: 100%;
margin: 0 auto 210px;
}

#none_ranking .ranking_ptn01 .fukidashi01{
top: 38px;
left: 30px;
max-width: 251px;
width: 100%;
padding: 30px 30px 39px;
background-image: url(../image/fukidashi01_none_ranking01.png);
}

#none_ranking .ranking_ptn01 .fukidashi02{
top: 38px;
right: 30px;
max-width: 231px;
width: 100%;
padding: 29px 20px 43px 34px;
background-image: url(../image/fukidashi02_none_ranking01.png);
}

#none_ranking .ranking_ptn01 .fukidashi03{
top: 251px;
left: 33px;
max-width: 175px;
width: 100%;
padding: 49px 21px 27px 28px;
background-image: url(../image/fukidashi03_none_ranking01.png);
}

#none_ranking .ranking_ptn01 .fukidashi04{
top: 304px;
right: 34px;
max-width: 207px;
width: 100%;
padding: 48px 28px 18px 32px;
background-image: url(../image/fukidashi04_none_ranking01.png);
}

#none_ranking .ranking_ptn01 .fukidashi05{
top: 492px;
left: 56px;
max-width: 320px;
width: 100%;
padding: 52px 2px 28px 31px;
background-image: url(../image/fukidashi05_none_ranking01.png);
}

#none_ranking .ranking_ptn01 .fukidashi06{
top: 512px;
right: 41px;
max-width: 475px;
width: 100%;
padding: 56px 2px 30px 33px;
background-image: url(../image/fukidashi06_none_ranking01.png);
}

#none_ranking .ranking_ptn01 .fukidashi06 p{
letter-spacing: -0.1em;
}

#none_ranking .ranking_ptn02 .cnt_g{
padding-top: 158px;
}

#none_ranking .ranking_ptn02 .curve_ttl {
max-width: 214px;
height: 74px;
margin-bottom: 30px;
}

#none_ranking .ranking_ptn02 .curve_ttl .curve {
top: 205px;
transform: translate(-50%, -50%) rotate(-15deg);
width: 410px;
height: 410px;
}

#none_ranking .ranking_ptn02 .curve_ttl h3 {
max-width: 214px;
}

#none_ranking .ranking_ptn02 .cnt_img{
max-width: 726px;
width: 100%;
padding-left: 140px;
margin: 0 auto 318px;
}

#none_ranking .ranking_ptn02 .fukidashi01{
top: 43px;
left: 31px;
max-width: 270px;
width: 100%;
padding: 32px 38px 29px;
background-image: url(../image/fukidashi01_none_ranking02.png);
}

#none_ranking .ranking_ptn02 .fukidashi02{
top: 97px;
right: 49px;
max-width: 218px;
width: 100%;
padding: 26px 25px 44px;
background-image: url(../image/fukidashi02_none_ranking02.png);
}

#none_ranking .ranking_ptn02 .fukidashi03{
top: 292px;
left: 30px;
max-width: 187px;
width: 100%;
padding: 51px 27px 18px;
background-image: url(../image/fukidashi03_none_ranking02.png);
}

#none_ranking .ranking_ptn02 .fukidashi04{
top: 483px;
right: 258px;
max-width: 270px;
width: 100%;
padding: 50px 12px 24px 22px;
background-image: url(../image/fukidashi04_none_ranking02.png);
}

#none_ranking .ranking_ptn02 .fukidashi05{
top: 538px;
left: 55px;
max-width: 301px;
width: 100%;
padding: 55px 30px 50px 40px;
background-image: url(../image/fukidashi05_none_ranking02.png);
}

#none_ranking .ranking_ptn02 .fukidashi05 .attention_text{
margin-top: 20px;
}

#none_ranking .ranking_ptn02 .fukidashi06{
top: 656px;
right: 70px;
max-width: 461px;
width: 100%;
padding: 52px 2px 50px 71px;
background-image: url(../image/fukidashi06_none_ranking02.png);
}

#none_ranking .ranking_ptn02 .fukidashi06 p{
letter-spacing: -0.1em;
}

#none_ranking .ranking_ptn03 .cnt_g{
padding-top: 158px;
}

#none_ranking .ranking_ptn03 .curve_ttl {
max-width: 371px;
height: 169px;
margin-bottom: -50px;
}

#none_ranking .ranking_ptn03 .curve_ttl .curve {
top: 191px;
width: 382px;
height: 382px;
}

#none_ranking .ranking_ptn03 .curve_ttl h3 {
max-width: 371px;
}

#none_ranking .ranking_ptn03 .cnt_img{
max-width: 388px;
width: 100%;
padding-right: 38px;
margin: 0 auto 307px;
}

#none_ranking .ranking_ptn03 .fukidashi01{
top: 34px;
left: 43px;
max-width: 247px;
width: 100%;
padding: 22px 25px 46px;
background-image: url(../image/fukidashi01_none_ranking03.png);
}

#none_ranking .ranking_ptn03 .fukidashi02{
top: 78px;
right: 27px;
max-width: 260px;
width: 100%;
padding: 26px 30px 43px 34px;
background-image: url(../image/fukidashi02_none_ranking03.png);
}

#none_ranking .ranking_ptn03 .fukidashi03{
top: 251px;
left: 27px;
max-width: 209px;
width: 100%;
padding: 46px 20px 28px;
background-image: url(../image/fukidashi03_none_ranking03.png);
}

#none_ranking .ranking_ptn03 .fukidashi04{
top: 357px;
right: 35px;
max-width: 262px;
width: 100%;
padding: 52px 32px 31px 42px;
background-image: url(../image/fukidashi04_none_ranking03.png);
}

#none_ranking .ranking_ptn03 .fukidashi05{
top: 522px;
left: 64px;
max-width: 289px;
width: 100%;
padding: 55px 12px 33px 22px;
background-image: url(../image/fukidashi05_none_ranking03.png);
}

#none_ranking .ranking_ptn03 .fukidashi06{
top: 609px;
right: 58px;
max-width: 507px;
width: 100%;
padding: 58px 0 36px 35px;
background-image: url(../image/fukidashi06_none_ranking03.png);
}

#none_ranking .ranking_ptn03 .fukidashi06 p{
letter-spacing: -0.1em;
}

#none_ranking .ranking_ptn04 .cnt_g{
padding-top: 149px;
}

#none_ranking .ranking_ptn04 .curve_ttl {
max-width: 310px;
height: 112px;
margin-bottom: 30px;
}

#none_ranking .ranking_ptn04 .curve_ttl .curve {
top: 185px;
width: 370px;
height: 370px;
}

#none_ranking .ranking_ptn04 .curve_ttl h3 {
max-width: 310px;
}

#none_ranking .ranking_ptn04 .cnt_img{
max-width: 423px;
width: 100%;
margin: 0 auto 352px;
}

#none_ranking .ranking_ptn04 .fukidashi01{
top: 45px;
left: 27px;
max-width: 259px;
width: 100%;
padding: 32px 21px 51px;
background-image: url(../image/fukidashi01_none_ranking04.png);
}

#none_ranking .ranking_ptn04 .fukidashi02{
top: 43px;
right: 33px;
max-width: 252px;
width: 100%;
padding: 22px 25px 49px;
background-image: url(../image/fukidashi02_none_ranking04.png);
}

#none_ranking .ranking_ptn04 .fukidashi03{
top: 278px;
left: 20px;
max-width: 214px;
width: 100%;
padding: 52px 26px 32px;
background-image: url(../image/fukidashi03_none_ranking04.png);
}

#none_ranking .ranking_ptn04 .fukidashi04{
top: 387px;
right: 43px;
max-width: 220px;
width: 100%;
padding: 52px 34px 30px;
background-image: url(../image/fukidashi04_none_ranking04.png);
}

#none_ranking .ranking_ptn04 .fukidashi05{
top: 555px;
left: 81px;
max-width: 313px;
width: 100%;
padding: 52px 18px 31px;
background-image: url(../image/fukidashi05_none_ranking04.png);
}

#none_ranking .ranking_ptn04 .fukidashi06{
top: 608px;
right: 53px;
max-width: 462px;
width: 100%;
padding: 54px 40px 35px;
background-image: url(../image/fukidashi06_none_ranking04.png);
}

#none_ranking .ranking_ptn04 .btn_ptn01 {
max-width: 410px;
}

#none_ranking .ranking_ptn04 .btn_ptn01 a {
letter-spacing: 0;
}

#none_ranking .ranking_ptn04 .btn_ptn01 a .big_text {
letter-spacing: -.05em;
}

#none_ranking .ranking_ptn05 .cnt_g{
padding-top: 166px;
}

#none_ranking .ranking_ptn05 .curve_ttl {
max-width: 297px;
height: 102px;
margin-bottom: 32px;
}

#none_ranking .ranking_ptn05 .curve_ttl .curve {
top: 184px;
width: 368px;
height: 368px;
}

#none_ranking .ranking_ptn05 .curve_ttl h3 {
max-width: 297px;
}

#none_ranking .ranking_ptn05 .cnt_img{
max-width: 395px;
width: 100%;
margin: 0 auto 352px;
}

#none_ranking .ranking_ptn05 .fukidashi01{
top: 47px;
left: 38px;
max-width: 232px;
width: 100%;
padding: 31px 30px 51px;
background-image: url(../image/fukidashi01_none_ranking05.png);
}

#none_ranking .ranking_ptn05 .fukidashi02{
top: 85px;
right: 37px;
max-width: 242px;
width: 100%;
padding: 20px 24px 44px;
background-image: url(../image/fukidashi02_none_ranking05.png);
}

#none_ranking .ranking_ptn05 .fukidashi03{
top: 280px;
left: 35px;
max-width: 192px;
width: 100%;
padding: 27px 20px 49px;
background-image: url(../image/fukidashi03_none_ranking05.png);
}

#none_ranking .ranking_ptn05 .fukidashi04{
top: 367px;
right: 29px;
max-width: 220px;
width: 100%;
padding: 53px 24px 31px;
background-image: url(../image/fukidashi04_none_ranking05.png);
}

#none_ranking .ranking_ptn05 .fukidashi05{
top: 509px;
left: 75px;
max-width: 337px;
width: 100%;
padding: 51px 20px 33px;
background-image: url(../image/fukidashi05_none_ranking05.png);
}

#none_ranking .ranking_ptn05 .fukidashi06{
top: 656px;
right: 148px;
max-width: 493px;
width: 100%;
padding: 53px 34px 31px;
background-image: url(../image/fukidashi06_none_ranking05.png);
}



/* ------------------------------------------------------------
*
    #n-one keywords
*
------------------------------------------------------------ */

#none_keywords{
padding-top: 267px;
}

#none_keywords .l-container__inner{
padding-top: 0;
padding-bottom: 0;
}

#none_keywords .h2_box .subtitle{
height: 51px;
}

#none_keywords .h2_box .subtitle .ttl{
top: 200px;
width: 400px;
height: 400px;
}

#none_keywords .h2_box h2{
max-width: 479px;
}

#none_keywords .catchcopy{
margin-bottom: 45px;
}

#none_keywords .fukidashi{
position: relative;
width: 100%;
background-color: #89A6C0;
color: #fff;
padding: 25px 0 26px;
font-size: 26px;
line-height: 1;
letter-spacing: 0.02em;
text-align: center;
margin-bottom: 42px;
}

#none_keywords .fukidashi::after{
content: "";
display: block;
width: 45px;
height: 24px;
border-top: 24px solid #89A6C0;
border-left: 22.5px solid transparent;
border-right: 22.5px solid transparent;
position: absolute;
bottom: -23px;
left: 50%;
transform: translateX(-50%);
}

#none_keywords .keyword_g{
max-width: 935px;
width: 100%;
margin: 0 auto 24px;
padding: 0;
list-style: none;
display: flex;
align-items: start;
flex-wrap: wrap;
}

#none_keywords .keyword_g .keyword{
display: inline-block;
padding: 10px 13px 10px 12px;
font-size: 18px;
letter-spacing: .081em;
line-height: 1;
border-radius: 22px;
border: 1px solid #000000;
margin: 0 6px 12px;
cursor: pointer;
}

#none_keywords .keyword_g .keyword.active{
background-color: #5A79AD;
color: #fff;
}

#none_keywords .l-container__inner02{
max-width: 1027px;
}

#none_keywords .keyword_block{
display: none;
}

#none_keywords .keyword_block.active{
display: block;
}

#none_keywords .cnt_g{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

#none_keywords .cnt_g .cnt_box{
max-width: 322px;
width: 32.63%;
background-color: #E0E7E2;
border-radius: 13px;
padding: 5px 14px 40px;
margin-bottom: 7px;
}

#none_keywords .cnt_g .cnt_box.dummy {
opacity: 0;
}

#none_keywords .cnt_g .cnt_box .tag{
font-size: 12px;
color: #6478AA;
margin-bottom: 2px;
text-align: right;
}

#none_keywords .cnt_g .cnt_box .h3_title{
max-width: 234px;
width: 100%;
margin: 0 auto;
font-size: 18px;
line-height: 24px;
margin-bottom: 2px;
}

#none_keywords .cnt_g .cnt_box .cnt_img{
max-width: 220px;
width: 100%;
margin: 0 auto 9px;
}

#none_keywords .cnt_g .cnt_box p{
font-size: 14px;
letter-spacing: -0.05em;
line-height: 20px;
margin-bottom: 10px;
}

#none_keywords .cnt_g .cnt_box .car_type{
font-size: 13px;
line-height: 1;
text-align: right;
}


/* ------------------------------------------------------------
*
    #n-one renewal
*
------------------------------------------------------------ */

#none_renewal{
padding-top: 303px;
}

#none_renewal .l-container__inner{
padding-top: 0;
padding-bottom: 0;
}

#none_renewal .h2_box{
margin-bottom: 42px;
}

#none_renewal .h2_box h2{
max-width: 522px;
}

#none_renewal .bg{
background-color: #F0F0EB;
padding: 60px 0 110px;
}

#none_renewal .icon{
max-width: 342px;
width: 100%;
margin: 0 auto 39px;
}

#none_renewal .catchcopy{
font-size: 24px;
letter-spacing: 0.065em;
line-height: 40px;
text-align: center;
margin-bottom: 44px;
}

#none_renewal .cnt_g{
max-width: 764px;
width: 100%;
margin: 0 auto;
display: flex;
align-items: start;
flex-wrap: wrap;
justify-content: space-between;
}

#none_renewal .cnt_box{
max-width: 357px;
width: 100%;
margin: 0 0 30px 0;
}

#none_renewal .cnt_box .h3_box{
display: flex;
align-items: center;
margin-bottom: 5px;
}

#none_renewal .cnt_box .h3_box .number{
max-width: 63px;
width: 100%;
margin-right: 6px;
}

#none_renewal .cnt_box .h3_box h3{
font-size: 18px;
line-height: 27px;
letter-spacing: 0;
}

#none_renewal .cnt_box .cnt_img{
max-width: 325px;
width: 100%;
margin: 0 auto 8px;
}

#none_renewal .cnt_box p{
max-width: 325px;
width: 100%;
margin: 0 auto;
font-size: 14px;
line-height: 20px;
letter-spacing: -0.005em;
}

#none_renewal .cnt_box .car_type{
max-width: 325px;
width: 100%;
margin: 0 auto;
text-align: right;
font-size: 13px;
}

#none_renewal .last_text{
font-size: 21px;
letter-spacing: 0.04em;
line-height: 35px;
text-align: center;
margin: 60px 0 20px;
}

#none_renewal .btn_ptn02{
max-width: 454px;
width: 100%;
margin: 0 auto;
}

#none_renewal .btn_ptn02 a{
display: block;
width: 100%;
position: relative;
background-color: #506298;
border: 1px solid #000;
border-radius: 50px;
color: #fff;
font-size: 29px;
line-height: 1;
letter-spacing: 0.05em;
padding: 35px 25px 36px 0;
text-align: right;
text-decoration: none;
box-shadow: 5px 5px 7px rgba(0,0,0,.3);
transition: .3s;
}

#none_renewal .btn_ptn02 a:hover {
opacity: .7;
}

#none_renewal .btn_ptn02 a::before{
/* content: url(../image/arrow_right_blue.png); */
content: "";
display: block;
background: #fff;
border-radius: 50%;
width: 111px;
height: 111px;
border: 1px solid #000;
position: absolute;
top: -4px;
left: -9px;
}


#none_renewal .btn_ptn02 a::after{
content: "";
display: block;
width: 41px;
height: 47px;
background: url(../image/arrow_right_blue.png) no-repeat center center/100% auto;
position: absolute;
top: 27px;
left: 31px;
}


/* ------------------------------------------------------------
*
    #n-one stagram
*
------------------------------------------------------------ */

#none_stagram{
padding: 113px 0 91px;
position: relative;
}

#none_stagram .l-container__inner{
padding-top: 24px;
padding-bottom: 21px;
}

#none_stagram::after{
content: "";
display: block;
width: 100%;
height: 13px;
background: url(../image/bg_none_stagram.png) repeat center center /auto 13px;
}

#none_stagram::before{
content: "";
display: block;
width: 100%;
height: 13px;
background: url(../image/bg_none_stagram.png) repeat center center /auto 13px;
}

#none_stagram .h2_box{
margin-bottom: 12px;
}

#none_stagram h2{
max-width: 364px;
}

#none_stagram .catchcopy{
margin-bottom: 36px;
}

#none_stagram .cnt_g{
display: flex;
flex-wrap: wrap;
max-width: 957px;
width: 100%;
margin: 0 auto 21px;
}

#none_stagram .cnt_g .cnt_box{
max-width: 316px;
width: 33.02%;
border-radius: 12px;
background-color: #C8CDE6;
padding: 12px 9px 9px;
margin-bottom: 4px;
margin-left: .47%;
}

#none_stagram .cnt_g .cnt_box:nth-child(3n + 1) {
margin-left: 0;
}

#none_stagram .cnt_g .cnt_box:nth-child(n + 7) {
display: none;
}

#none_stagram .cnt_g .cnt_box .user_text{
display: flex;
align-items: center;
padding: 0 15px 12px;
}

#none_stagram .cnt_g .cnt_box .user_text img{
width: 20px;
margin-right: 11px;
}

#none_stagram .cnt_g .cnt_box .user_text .user{
font-size: 13px;
letter-spacing: 0.075em;
line-height: 18px;
}

#none_stagram .next_btn{
text-align: center;
}

#none_stagram .next_btn a{
display: inline-block;
padding: 5px;
color: #000;
font-size: 19px;
letter-spacing: 0.065em;
line-height: 21px;
text-decoration: none;
padding-bottom: 2px;
border-bottom: 1px solid #000;
cursor: pointer;
}

#none_stagram .next_btn a:hover {
border-bottom: 0;
}


/* ------------------------------------------------------------
*
    #n-one stagram
*
------------------------------------------------------------ */
/*#none_bnr {
padding-bottom: 90px;
}*/

#none_bnr .l-container__inner {
padding-top: 0;
padding-bottom: 0;
}

#none_bnr .cnt_g {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 756px;
width: 100%;
margin: 0 auto;
}

#none_bnr .cnt_g .bnr {
max-width: 356px;
width: 49%;
}

#none_bnr .cnt_g .bnr a {
display: block;
border-radius: 5px;
overflow: hidden;
transition: .2s ease;
}

#none_bnr .cnt_g .bnr_community a {
background-color: #f1f1f1;
}

#none_bnr .cnt_g .bnr a:hover {
opacity: .7;
}

#none_bnr .cnt_g .bnr img {
display: block;
width: 100%;
height: auto;
}


/* ------------------------------------------------------------
*
    #n-one survey_wrap
*
------------------------------------------------------------ */
#talkroom .survey_wrap .l-container__inner {
padding: 60px 20px;
}

#talkroom .c-list.c-list--type > li.red {
color: #cf0000;
}


/* ------------------------------------------------------------
*
    #n-one notece_wrap
*
------------------------------------------------------------ */
#talkroom .notece_wrap .l-container__inner {
padding: 40px 20px 90px;
}




}

@media print, screen and (min-width:769px) and (max-width:990px){
#talkroom .fixed_none {
right: 45px;
}
}



