@charset "UTF-8";

/*-----------------------------------------
 COMMON
-----------------------------------------*/
.block-event-page { color: #443829;}
.block-event-page img { height: auto;}

.ab_list_bt_dw      { margin-bottom: 60px; color: #443829; overflow: hidden;}
.ab_list_bt_dw ul   { display: flex; flex-wrap: wrap;}
.ab_list_bt_dw li   {
  width: 48.6%; margin-top: 20px; margin-right: 2.8%; color: #443829; border-radius: 50px; border: 2px solid #938675; text-align: center;
  background: url('../../common/img/ar_down.png') no-repeat 95%;
}
.ab_list_bt_dw li:nth-child(2n) { margin-right: 0;}
.ab_list_bt_dw li a { padding: 15px 20px; font-size: 18px; display: block; text-decoration: none;}

.bnr_list li            { margin: 0 0 20px;}
.bnr_list li:last-child { margin: 0;}
.bnr_list li a:hover    { opacity: .8;}
.bnr_list img           { width: 100%; vertical-align: top;}

/*-----------------------------------------
 PC
-----------------------------------------*/
@media only screen and (min-width: 768px) {
	.sp_ { display: none !important;}
  .block-event-page img { max-width: 100%;}
  .block-event-page h2.title { padding: 0; margin: 0; text-align: center; background: none;}
  .block-event-page h3       { padding: 0; margin: 0; background: none;}
  .block-event-page h3::after{ display: none !important;}
  .block-event-page .mainvisual     { margin: 0 0 30px 0;}
  .block-event-page .mainvisual img { max-width: 100%;}
  .block-event-page .mainvisual-bottom   { margin: 0;}
  .block-event-page .mainvisual-bottom p { margin: 0 0 5px 0; font-size: 16px;}
  .block-event-page .page-link-button    { max-width: 550px; margin: 30px auto; display: flex; flex-wrap: wrap;}
  .block-event-page .page-link-button a  { 
    width: 100%; padding: 15px 45px; border: #938675 2px solid; border-radius: 100px;
    text-align: center; text-decoration: none; line-height: 1.2; font-size: 18px; font-weight: bold; box-sizing: border-box;
    background: #fff url('../../common/img/ar_down.png') 96% center no-repeat; -webkit-background-size: 14px 14px; background-size: 14px 14px;
  }
  .block-event-page .page-link-button a span.small { margin-bottom: 5px; display: block; font-size: 16px; font-weight: bold; text-align: center;}
	#sunflower { font-size: 20px; line-height: 1.8;}
  
  /* あなたにぴったりのヒマワリを見つけよう！ */
  #sunflower #sec01 { margin-bottom: 80px;}
  #sunflower #sec01 h2 { margin-bottom: 40px;}
  #sunflower #sec01 h2 img { width: 641px;}
  #sunflower #sec01 .image { text-align: center;}
  #sunflower #sec01 .page-link-button   { max-width: 440px;}
  #sunflower #sec01 .page-link-button a { padding: 20px 45px;}
  
  /* 迷ったらコレ！タイプ別おすすめ品種 */
  #sunflower #sec02 { margin-bottom: 80px;}
  #sunflower #sec02 h2 img { width: 641px;}
  #sunflower #sec02 .type-box { margin: 40px 0 0 0; border-radius: 10px;}
  #sunflower #sec02 .type-box-inner { 
    padding: 50px 30px 10px; border-left: #bebebe 2px dashed; border-right: #bebebe 2px dashed; border-bottom: #bebebe 2px dashed;
    border-radius: 0 0 10px 10px; background: url("../img/bg.jpg") repeat; position: relative;
  }
  #sunflower #sec02 h3.color-title { padding: 20px 30px; margin: 0; border-radius: 10px 10px 0 0; font-size: 28px; font-weight: bold; color: #fff; text-align: center;}
  #sunflower #sec02 h3.color-title strong  { margin-right: 10px; font-size: 38px; font-weight: bold; color: #fff;}
  #sunflower #sec02 #type01 h3.color-title { background: #0ba29a;}
  #sunflower #sec02 #type02 h3.color-title { background: #75bdb7; background: linear-gradient(90deg, #75bdb7 50%, #90c31f 50%);}
  #sunflower #sec02 #type03 h3.color-title { background: #29a536; background: linear-gradient(90deg, #29a536 50%, #90c31f 50%);}
  #sunflower #sec02 #type04 h3.color-title { background: #29a536; background: linear-gradient(90deg, #29a536 50%, #d18f08 50%);}
  #sunflower #sec02 #type05 h3.color-title { background: #ea5413;}
  #sunflower #sec02 #type06 h3.color-title { background: #956134; display: flex; justify-content: center; align-items: center;}
  #sunflower #sec02 #type06 h3.color-title .sub { margin: 0 30px 0 0; font-size: 20px;}
  #sunflower #sec02 .type-box .frame-top        { margin: 0 0 30px 0; display: flex; justify-content: space-between; align-items: center;}
  #sunflower #sec02 #type02.type-box .frame-top { display: flex; flex-direction: row-reverse;}
  #sunflower #sec02 #type04.type-box .frame-top { display: flex; flex-direction: row-reverse;}
  #sunflower #sec02 #type06.type-box .frame-top { display: flex; flex-direction: row-reverse;}
  #sunflower #sec02 .type-box .frame-top .image { width: 340px;}
  #sunflower #sec02 .type-box .frame-top .desc  { width: calc(100% - 370px);}
  #sunflower #sec02 .type-box .frame-top .pop   { position: absolute; top: -50px;}
  #sunflower #sec02 .type-box .frame-top .lead  { margin: 0 0 10px; font-size: 20px; font-weight: bold; line-height: 1.4; text-align: center;}
  #sunflower #sec02 .type-box .frame-top .name  { margin: 0 0 15px; font-size: 48px; font-weight: bold; line-height: 1.2; text-align: center;}
  #sunflower #sec02 #type03.type-box .frame-top .name  { letter-spacing: -2px;}
  #sunflower #sec02 .type-box ul li             { text-align: justify;}
  #sunflower #sec02 .type-box ul li.ttl         { margin: 0 0 10px 0; padding: 2px; text-align: center; letter-spacing: 0.5em; color: #fff; background: #443829;}
  #sunflower #sec02 .type-box ul li.indent      { padding-left: 0.5em; text-indent: -0.5em;}
  #sunflower #sec02 .type-box .frame-top .text  { line-height: 2.0;}
  #sunflower #sec02 #type01.type-box .frame-top .pop { width: 220px; right: -40px;}
  #sunflower #sec02 #type02.type-box .frame-top .pop { width: 262px; left:  -42px;}
  #sunflower #sec02 #type03.type-box .frame-top .pop { width: 281px; right: -60px;}
  #sunflower #sec02 #type04.type-box .frame-top .pop { width: 251px; left:  -45px;}
  #sunflower #sec02 #type05.type-box .frame-top .pop { width: 206px; right: -38px; top: -20px;}
  #sunflower #sec02 #type01.type-box .frame-bottom .image { margin: 0 30px;}
  #sunflower #sec02 #type02.type-box .frame-bottom .image { margin: 0 60px;}
  #sunflower #sec02 #type03.type-box .frame-bottom .image { margin: 0 30px;}
  
  /* 意外と知らないヒマワリのQ&A */
  #sunflower #sec03 { margin-bottom: 80px;}
  #sunflower #sec03 h2 img  { width: 426px;}
  #sunflower #sec03 .faq li {
    min-height: 400px;
    padding: 35px 330px 35px 0;
    border-top: #ffea00 2px dashed;
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: url("../img/sec03_q.png") 15px 35px no-repeat;
    -webkit-background-size: 70px 86px;
    background-size: 70px 86px;
  }
  #sunflower #sec03 .faq li:first-child { border-top: none;}
  #sunflower #sec03 .faq li:nth-child(2n) { padding: 35px 0 35px 330px; background: url("../img/sec03_q.png") calc(100% - 15px) 35px no-repeat; -webkit-background-size: 70px 86px; background-size: 70px 86px;}
  #sunflower #sec03 .faq li.q03 { background: url("../img/sec03_q.png") 15px 65px no-repeat; -webkit-background-size: 70px 86px; background-size: 70px 86px;}
  #sunflower #sec03 li .desc .image { width: 300px; position: absolute; top: 35px;}
  #sunflower #sec03 li:nth-child(even) .image { left: 0;}
  #sunflower #sec03 li:nth-child(odd) .image  { right: 0;}
  #sunflower #sec03 li .desc h3 { margin-bottom: 30px; font-size: 26px; font-weight: bold;}
  #sunflower #sec03 li .desc p  { line-height: 2.0;}
  
  #sunflower #sec04 h2 img { width: 475px;}
  
}

/*-----------------------------------------
 SP
-----------------------------------------*/
@media only screen and (max-width: 767px) {
	.pc_ { display: none !important;}
  .special-intro { padding: 0 10px; }
	.ab_list_bt_dw { margin: 0 10px 50px;}
	.ab_list_bt_dw li { width: 100%; margin-top: 10px; margin-right: 0;}
  .ab_list_bt_dw li a { padding: 10px 20px; letter-spacing: -1.5px; font-size: 16px; display: block;}
  .bnr_list    { margin: 0 10px;}
  .bnr_list li { margin: 0 0 10px;}
  .block-event-page img { max-width: 100%; width: auto;}
  .block-event-page h2.title  { padding: 0; margin: 0; text-align: center; background: none;}
  .block-event-page h3        { padding: 0; margin: 0; background: none;}
  .block-event-page h3::after { display: none !important;}
  .block-event-page .mainvisual     { margin: 0 10px 5vw;}
  .block-event-page .mainvisual img { max-width: 100%;}
  .block-event-page .mainvisual-bottom   { margin: 0 4vw;}
  .block-event-page .mainvisual-bottom p { margin: 0 0 5px 0; font-size: 16px;}
  .block-event-page .page-link-button    { max-width: 90%; margin: 20px auto; display: flex; flex-wrap: wrap;}
  .block-event-page .page-link-button a  { 
    width: 100%; padding: 10px 25px; border: #938675 2px solid; border-radius: 100px;
    text-align: center; text-decoration: none; line-height: 1.2; font-size: 16px; font-weight: bold; box-sizing: border-box;
    background: #fff url('../../common/img/ar_down.png') 96% center no-repeat; -webkit-background-size: 14px 14px; background-size: 14px 14px;
  }
  .block-event-page .page-link-button a span.small { margin-bottom: 5px; display: block; font-size: 14px; font-weight: bold; text-align: center;}
	#sunflower { font-size: 18px; line-height: 1.8;}
  
  /* あなたにぴったりのヒマワリを見つけよう！ */
  #sunflower #sec01 { margin-bottom: 60px;}
  #sunflower #sec01 h2 { margin-bottom: 20px; text-align: center;}
  #sunflower #sec01 h2 img { width: 80%;}
  #sunflower #sec01 .image { margin: 0 10px; text-align: center;}
  #sunflower #sec01 .page-link-button a  { padding: 15px 25px;}
  
  /* 迷ったらコレ！タイプ別おすすめ品種 */
  #sunflower #sec02 { margin-bottom: 60px;}
  #sunflower #sec02 h2 img { width: 80%;}
  #sunflower #sec02 .type-box-inner .page-link-button { max-width: 100%;}
  #sunflower #sec02 .type-box { margin: 20px 10px 0; border-radius: 10px;}
  #sunflower #sec02 .type-box-inner { 
    padding: 50px 15px 10px; border-left: #bebebe 2px dashed; border-right: #bebebe 2px dashed; border-bottom: #bebebe 2px dashed;
    border-radius: 0 0 10px 10px; background: url("../img/bg.jpg") repeat; position: relative;
  }
  #sunflower #sec02 h3.color-title { padding: 12px 15px; margin: 0; border-radius: 10px 10px 0 0; font-size: 16px; font-weight: bold; color: #fff; text-align: center;}
  #sunflower #sec02 h3.color-title strong  { margin-right: 10px; font-size: 20px; font-weight: bold; color: #fff;}
  #sunflower #sec02 #type01 h3.color-title      { background: #0ba29a;}
  #sunflower #sec02 #type02 h3.color-title      { background: #75bdb7; background: linear-gradient(90deg, #75bdb7 50%, #90c31f 50%);}
  #sunflower #sec02 #type03 h3.color-title      { background: #29a536; background: linear-gradient(90deg, #29a536 50%, #90c31f 50%);}
  #sunflower #sec02 #type04 h3.color-title      { background: #29a536; background: linear-gradient(90deg, #29a536 50%, #d18f08 50%);}
  #sunflower #sec02 #type05 h3.color-title      { background: #ea5413;}
  #sunflower #sec02 #type06 h3.color-title      { background: #956134; display: block;}
  #sunflower #sec02 #type06 h3.color-title .sub { margin: 0 0 5px 0; font-size: 14px; display: block;}
  #sunflower #sec02 .type-box .frame-top        { margin: 0 0 20px 0; display: block;}
  #sunflower #sec02 .type-box .frame-top .image { width: 100%; margin: 0 0 20px; text-align: center;}
  #sunflower #sec02 .type-box .frame-top .desc  { width: 100%;}
  #sunflower #sec02 .type-box .frame-top .pop   { position: absolute; top: -10px;}
  #sunflower #sec02 .type-box .frame-top .lead  { margin: 0 0 10px; font-size: 18px; font-weight: bold; line-height: 1.4; text-align: center;}
  #sunflower #sec02 .type-box .frame-top .name  { margin: 0 0 15px; font-size: 38px; font-weight: bold; line-height: 1.2; text-align: center;}
  #sunflower #sec02 .type-box ul li             { text-align: justify;}
  #sunflower #sec02 .type-box ul li.ttl         { margin: 0 0 10px 0; padding: 2px; text-align: center; letter-spacing: 0.5em; color: #fff; background: #443829;}
  #sunflower #sec02 .type-box ul li.indent      { padding-left: 0.5em; text-indent: -0.5em;}
  #sunflower #sec02 .type-box .frame-top .text  { line-height: 2.0;}
  #sunflower #sec02 #type01.type-box .frame-top .pop { width: 160px; right: -10px;}
  #sunflower #sec02 #type02.type-box .frame-top .pop { width: 202px; left:  -10px;}
  #sunflower #sec02 #type03.type-box .frame-top .pop { width: 221px; right: -10px;}
  #sunflower #sec02 #type04.type-box .frame-top .pop { width: 191px; left:  -10px;}
  #sunflower #sec02 #type05.type-box .frame-top .pop { width: 146px; right: -10px; top: -20px;}
  #sunflower #sec02 #type06 .type-box-inner { padding: 30px 15px 10px;}
  
  /* 意外と知らないヒマワリのQ&A */
  #sunflower #sec03 { margin-bottom: 20px;}
  #sunflower #sec03 h2      { text-align: center;}
  #sunflower #sec03 h2 img  { width: 68%;}
  #sunflower #sec03 .faq    { margin: 0 10px;}
  #sunflower #sec03 .faq li {
    padding: 35px 0;
    border-top: #ffea00 2px dashed;
    position: relative;
    box-sizing: border-box;
    background: url("../img/sec03_q.png") left 15px no-repeat;
    -webkit-background-size: 42px auto;
    background-size: 42px auto;
  }
  #sunflower #sec03 .faq li:first-child { border-top: none;}
  #sunflower #sec03 li .image   { margin: 0 0 20px 0; text-align: center;}
  #sunflower #sec03 li .desc h3 { padding: 0 0 0 15px; margin-bottom: 20px; font-size: 20px; font-weight: bold;}
  #sunflower #sec03 li .desc p  { line-height: 1.6;}
  
  #sunflower #sec04 h2 img { width: 80%;}
  
}