@charset "utf-8";

/* ==========================================================================//

// 共通設定

// ========================================================================== */
html {
  font-size: 62.5%;
  /* 10px */
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

body {
  color: #333;
  font-size: 1.4rem;
  line-height: 1.8;
  font-family: 'Hiragino Sans', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
  font-weight: 400;
}

/* iPad(768px) - iPad Pro/PC(1024px) */
@media screen and (min-width: 768px) {
  body {
    font-size: 1.6rem;
  }
}

a {
  text-decoration: underline;
  color: #333;
}

img {
  width: 100%;
  max-width: 100%;
  vertical-align: bottom;
  height: auto;
}

ul,
ol {
  list-style-type: none;
}

h2 {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: calc(80 * 100vw / 750);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}

/* iPhone SE(320px) */
@media screen and (max-width: 320px) {
  h2 {
    font-size: 2.2rem;
  }
}

/* タグ */
#tag {
  width: 1px;
  height: 1px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

/* SPのみ改行用 */
/* iPad(768px) - iPad Pro/PC(1024px) */
.pc_br {
  display: none;
}
  /* PCのみ改行用 */
.sp_br {
  display: block;
}

/* アニメーション要素のスタイル */
.animation{
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(30px);
}
/* アニメーション要素までスクロールした時のスタイル */
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* お問い合わせリンク出し分け */
.pc_contact{
    display:none;
}
.sp_contact{
    display:block;
}

/* iPad(768px) - iPad Pro/PC(1024px) */
@media screen and (min-width: 1000px) {
  h2 {
    font-size: 3.2rem;
    margin-bottom: 60px;
  }
  /* PCのみ改行用 */
  .pc_br {
    display: block;
  }
  .sp_br {
    display: none;
  }
  /* お問い合わせリンク出し分け */
  .pc_contact{
      display:block;
  }
  .sp_contact{
      display:none;
  }
}

/* ==========================================================================//

// レイアウト

// ========================================================================== */

.contents {
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  position: relative;
}

/* iPad(768px) - iPad Pro/PC(1024px) */
@media screen and (min-width: 768px) {
  body {
    background: #42b8ee;
  }
  .contents {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    background-color: #fff;
    overflow: hidden;
  }
}

/* ==========================================================================//

// ヘッダー

// ========================================================================== */

header {
  background: #fff;
}

.header_logo {
  width: calc(290 * 100vw / 750);
  padding: calc(20 * 100vw / 750) 0 calc(30 * 100vw / 750) calc(30 * 100vw / 750);
}

/* iPhone SE(320px) */
@media screen and (max-width: 320px) {
  .header_logo {
    padding: calc(10 * 100vw / 750) 0 calc(30 * 100vw / 750) calc(30 * 100vw / 750);
  }
}

.keyvisual {
  margin-bottom: calc(40 * 100vw / 750);
  text-align: center;
}
/* テキストタイトル */
.keyvisual.text {
  margin: calc(20 * 100vw / 750) 0 calc(40 * 100vw / 750);
}
.keyvisual.text strong {
  background: linear-gradient(transparent 70%, rgba(244,190,3,.5) 70%);
  display: inline;
  font-size: 2.5rem;
  font-weight: bold;
  position: relative;
  text-align: center;
}

/* iPad(768px) - iPad Pro/PC(1024px) */
@media screen and (min-width: 768px) {
  .header_logo {
    width: 180px;
    padding: 15px 0 20px 20px;
  }
  .keyvisual {
    margin-bottom: 40px;
  }
  /* テキストタイトル */
  .keyvisual.text strong {
    font-size: 3rem;
  }
}

/* ==========================================================================//

// クーポンキーワード

// ========================================================================== */

.coupon {
  background: #fff;
  padding: 0 calc(40 * 100vw / 750) calc(130 * 100vw / 750);
}

.title_coupon {
  text-align: center;
  font-weight: bold;
  margin-bottom: calc(10 * 100vw / 750);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  font-size: clamp(2.5rem, 1rem + 3.2vw, 3rem);
}

.keyword {
  background: #f1f1f1;
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: calc(40 * 100vw / 750);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}

.text_caution {
  /* color: #ff3300; */
  font-weight: bold;
}

.coupon_head {
  margin-bottom: calc(50 * 100vw / 750);
}

.coupon_body {
  border: 1px solid #f1f1f1;
  border-radius: 4px;
  padding: calc(40 * 100vw / 750) calc(25 * 100vw / 750);
}

.title_caution {
  font-size: 2rem;
  font-weight: bold;
  color: #ff3300;
  text-align: center;
  margin-bottom: calc(25 * 100vw / 750);
}

.caution_list {
  padding-left:1em;
  text-indent:-1em;
}

.caution_list li:not(:last-child) {
  margin-bottom: calc(20 * 100vw / 750);
}

.caution_list li::before {
  content: '・';
}
.coupon_condition{
  margin-bottom: calc(60 * 100vw / 750);
}
.coupon_head-lower{
  text-align: center;
}
.coupon_head-inner{
  margin-bottom: calc(60 * 100vw / 750);
}
.text_strong{
  font-size: clamp(2.2rem, 0.4rem + 3.84vw, 2.6rem);
  font-weight: bold;
}
.text_strong.-caution{
  color: #ff0000;
}
.coupon_table{
  width: 100%;
  text-align: center;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: bold;
  margin-bottom: calc(8 * 100vw / 750);
}
.coupon_table tr,
.coupon_table td {
  border: 2px solid #eee;
}
.coupon_table-title{
  color: #fff;
  background-color: #6EC9F2;
}
.coupon_table-text{
  width: 50%;
}
.table_text-number{
  width: 50%;
  vertical-align: middle;
}
.table_text-price{
  font-size: clamp(2.25rem, 0.75rem + 3.2vw, 2.75rem);
}

/* iPad(768px) - iPad Pro/PC(1024px) */
@media screen and (min-width: 768px) {
  .coupon {
    padding: 0 80px 100px;
  }
  .coupon_head {
    width: 680px;
    margin: 0 auto 30px;
  }
  .title_coupon {
    /* font-size: 2rem; */
    margin-bottom: 10px;
  }
  .keyword {
    margin: 0 auto 20px;
  }
  .coupon_body {
    width: 810px;
    border: 4px solid #f1f1f1;
    padding: 30px 25px;
    margin: 0 auto;
  }
  .title_caution {
    margin-bottom: 20px;
  }
  .caution_list li:not(:last-child) {
    margin-bottom: 10px;
  }
  .coupon_condition{
    margin-bottom: 60px;
  }
  .coupon_head-inner{
    margin-bottom: 60px;
  }
}

/* ==========================================================================//

// クーポンご利用のながれ

// ========================================================================== */

.flow {
  background: #f1f1f1;
  padding: calc(110 * 100vw / 750) calc(40 * 100vw / 750);
}

.flow_item {
  background: #fff;
  border-radius: 6px;
  padding: calc(10 * 100vw / 750) calc(25 * 100vw / 750) calc(20 * 100vw / 750);
  font-weight: bold;
  position: relative;
}

.flow_item:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: -35%;
  left: 48%;
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid #ed6b22;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

.flow_item:nth-child(6)::after {
  content: '';
  position: absolute;
  bottom: -5%;
  left: 48%;
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid #ed6b22;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

.flow_text {
  font-size: 1.6rem;
  font-weight: bold;
}

.flow_list li:not(:last-child) {
  margin-bottom: calc(80 * 100vw / 750);
}

.flow_item div {
  padding-bottom: calc(10 * 100vw / 750);
}

.flow_step1 {
  width: calc(82 * 100vw / 750);
}
.flow_step2 {
  width: calc(90 * 100vw / 750);
}
.flow_step3 {
  width: calc(91 * 100vw / 750);
}
.flow_step4 {
  width: calc(91 * 100vw / 750);
}
.flow_step5 {
  width: calc(91 * 100vw / 750);
}
.flow_step6 {
  width: calc(90 * 100vw / 750);
}
.flow_step7 {
  width: calc(89 * 100vw / 750);
}
.flow_step8 {
  width: calc(92 * 100vw / 750);
}

.img_capture {
  box-shadow: 0px 0px 9px 1px rgba(1, 1, 1, 0.15);
  margin: calc(15 * 100vw / 750) 0;
}

/* iPad(768px) - iPad Pro/PC(1024px) */
@media screen and (min-width: 768px) {
  .flow {
    padding: 80px 165px 100px;
  }
  .flow_item {
    padding: 15px 28px 15px;
  }
  .flow_item:not(:last-child)::after {
    bottom: -48%;
    border-top: 20px solid #00A0E9;
    border-right: 14px solid transparent;
    border-left: 14px solid transparent;
  }
  .flow_item:nth-child(6)::after {
    bottom: -8%;
    border-top: 20px solid #00A0E9;
    border-right: 14px solid transparent;
    border-left: 14px solid transparent;
  }
  .flow_text {
    font-size: 2.4rem;
  }
  .flow_list li:not(:last-child) {
    margin-bottom: 80px;
  }
  .flow_item div {
    padding-bottom: 6px;
  }
  .flow_step1 {
    width: 64px;
  }
  .flow_step2 {
    width: 68px;
  }
  .flow_step3 {
    width: 69px;
  }
  .flow_step4 {
    width: 70px;
  }
  .flow_step5 {
    width: 69px;
  }
  .flow_step6 {
    width: 70px;
  }
  .flow_step7 {
    width: 69px;
  }
  .flow_step8 {
    width: 71px;
  }
}

/* ==========================================================================//

// 挨拶状ドットコムのご紹介

// ========================================================================== */

.introduction {
  background: #E1ECF9;
  padding: calc(90 * 100vw / 750) calc(40 * 100vw / 750) calc(10 * 100vw / 750);
}

.introduction_header {
  margin-bottom: calc(100 * 100vw / 750);
}

.introduction_title {
  margin-bottom: calc(40 * 100vw / 750);
}

.service {
  margin-bottom: calc(110 * 100vw / 750);
}

.service_titile {
  font-size: 2rem;
  text-align: center;
  margin-bottom: calc(50 * 100vw / 750);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}

.service_item {
  margin-bottom: calc(80 * 100vw / 750);
}
/* COMのみ調整 */
.service_item.service_com + .service_item.service_com {
  margin-top: calc(-60 * 100vw / 750);
}

.service_item > a {
  height: calc(280 * 100vw / 750);
  background: #fff;
  display: block;
  position: relative;
  margin-bottom: calc(20 * 100vw / 750);
  overflow: hidden;
}

.service_item > a::after {
  content: "";
  display: block;
  position: absolute;
  right: 25px;
  bottom: -40px;
  width: calc(220 * 100vw / 750);
  height: calc(325 * 100vw / 750);
  transform: scale(1);
  -webkit-transform: scale(1);
  transition-duration: .3s;
  box-shadow: 0 6px 12px rgb(0 0 0 / 20%);
}

.service_hikkoshi > a::after{
  background: url("/shochu/images/coupon/img_hagaki_hikkoshi.jpg") no-repeat center center;
  background-size: 100%;
}
.service_kekkon > a::after{
  background: url("/shochu/images/coupon/img_hagaki_kekkon.jpg") no-repeat center center;
  background-size: 100%;
}
.service_nenga > a::after{
  background: url("/shochu/images/coupon/img_hagaki_nenga.jpg") no-repeat center center;
  background-size: 100%;
}
/*暑中*/
.service_shochu > a.-shochu::after{
  background: url("/shochu/images/coupon/img_hagaki_shochu.jpg") no-repeat center center;
  background-size: 100%;
}
/*残暑*/
.service_shochu > a.-zansho::after{
  background: url("/shochu/images/coupon/img_hagaki_zansho.jpg") no-repeat center center;
  background-size: 100%;
}

.service_mochu > a::after{
  background: url("/shochu/images/coupon/img_hagaki_mochu.jpg") no-repeat center center;
  background-size: 100%;
}
.service_kanchu > a::after{
  background: url("/shochu/images/coupon/img_hagaki_kanchu.jpg") no-repeat center center;
  background-size: 100%;
}
.service_com > a::after{
  background: url("/shochu/images/coupon/img_hagaki_com.png") no-repeat center center;
  background-size: 100%;
}

.service_self > a::after{
  background: url("/shochu/images/coupon/img_hagaki_self.png") no-repeat center center;
  background-size: 100%;
}

.service_item a div {
  position: absolute;
  top: 35%;
  left: 8%;
}
.service_item a .service_logo_self {
  top: 40%;
}

.service_description {
  margin-bottom: calc(20 * 100vw / 750);
}

.link_arrow {
  position: relative;
}

.link_arrow::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(/shochu/images/coupon/ico_right_arrow.svg) no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right: 5px;
}

.service_logo_hikkoshi {
  width: calc(268 * 100vw / 750);
}
.service_logo_kekkon {
  width: calc(311 * 100vw / 750);
}
.service_logo_nenga {
  width: calc(193 * 100vw / 750);
}
.service_logo_shochu {
  width: calc(218 * 100vw / 750);
}
.service_logo_mochu {
  width: calc(220 * 100vw / 750);
}
.service_logo_kanchu {
  width: calc(219 * 100vw / 750);
}
.service_logo_com {
  width: calc(245 * 100vw / 750);
}
.service_logo_self {
  width: calc(309 * 100vw / 750);
}

/* 季節・新生活の挨拶状サービスの特長 */
.features_list{
  display: flex;
  flex-direction: column;
  gap: calc(60 * 100vw / 750) 0;
}
.features_title {
  font-size: 1.6rem;
  margin-bottom: calc(60 * 100vw / 750);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}

.features_image {
  /* width: calc(280 * 100vw / 750); */
  margin: 0 0 calc(20 * 100vw / 750) 0;
  height: calc(456 * 100vw / 750);
  overflow: hidden;
}
.features_image  img{
  width: auto;
  height: 100%;
  object-fit: cover;
}
.features_subtitle {
  font-size: 1.8rem;
  margin-bottom: calc(10 * 100vw / 750);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  text-align: center;
}
.service_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap:calc(40 * 100vw / 750) calc(20 * 100vw / 750);
  margin-bottom:calc(100* 100vw / 750);
}
.service_list .box_about-group_item{
  width: calc(100% / 2 - calc(20 * 100vw / 750));
}
.service_list .box_about-group_item{
  display: block;
}
.service_list .box_about-group_item img{
  box-shadow: 0px 0px 10px rgb(0, 0, 0, .16);
  transition: opacity .3s;
  border-radius:calc(8* 100vw / 750);
  height: auto;
}
.service_list .box_about-group_item:hover img{
  opacity: .8;
}
/*professiona;l log*/
.com_log {
  width:calc(560* 100vw / 750);
  margin: 0 auto calc(80* 100vw / 750);
}
.com_log img {
  border-radius:calc(8* 100vw / 750);
  box-shadow: 0px 0px 10px rgb(0, 0, 0, .16);
  transition: opacity .3s;
  height: auto;
}
.com_log:hover img{
  opacity: .8;
}
/* iPad(768px) - iPad Pro/PC(1024px) */
@media screen and (min-width: 768px) {
  .introduction {
    padding: 80px 80px 20px;
  }
  .introduction_header {
    margin-bottom: 70px;
  }
  .introduction_title {
    margin-bottom: 30px;
    font-size: 3rem;
  }
  .introduction_description {
    text-align: center;
  }
  .service {
    margin-bottom: 110px;
  }
  .service_list {
      gap: 40px 20px;
      margin-bottom: 80px;
  }
  .service_list .box_about-group_item{
    width: calc(100% / 3 - 20px);
  }
  .service_list .box_about-group_item img{
    border-radius:5px;
  }
  .service_titile {
    font-size: 2.8rem;
    margin-bottom: 40px;
  }
  .service_item {
    flex-basis: 400px;
    margin-bottom: 60px;
  }
  /* COMのみ調整 */
  .service_item.service_com + .service_item.service_com {
    margin-top: 0;
  }
  .service_item > a {
    outline: 3px solid transparent;
    height: 168px;
    margin-bottom: 15px;
    transition-duration: .3s;
  }
  .service_item > a:hover {
    outline: 3px solid #ed6b22;
    transition-duration: .3s;
  }
  .service_item > a::after {
    content: "";
    display: block;
    position: absolute;
    right: 25px;
    bottom: -50px;
    width: 130px;
    height: 194px;
    box-shadow: 0 6px 12px rgb(0 0 0 / 20%);
    transform: scale(1);
    -webkit-transform: scale(1);
    transition-duration: .3s;
  }
  .service_item > a:hover::after {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    opacity: 1;
  }
  .link_arrow:hover {
    text-decoration: none;
  }
  .service_item a div {
    position: absolute;
    top: 35%;
    left: 8%;
  }
  .service_item a .service_logo_self {
    top: 40%;
  }
  .service_description {
    margin-bottom: 5px;
  }
  .service_logo_hikkoshi {
    width: 158px;
  }
  .service_logo_kekkon {
    width: 185px;
  }
  .service_logo_nenga {
    width: 115px;
  }
  .service_logo_shochu {
    width: 129px;
  }
  .service_logo_mochu {
    width: 131px;
  }
  .service_logo_kanchu {
    width: 131px;
  }
  .service_logo_com {
    width: 147px;
  }
  .service_logo_self {
    width: 184px;
  }

  /* 季節・新生活の挨拶状サービスの特長 */
  .features_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 0;
    gap: 40px;
  }
  .features_item {
    width: calc(100% / 2 - 20px);
    flex-direction: column;
    margin-bottom: 0;
  }
  .features_title {
    font-size: 2rem;
    margin-bottom: 40px;
  }
  .features_image {
    margin: 0 0 10px 0;
    height: min(calc(270 * 100vw / 768), 270px);
  }
  .features_subtitle {
    margin-bottom: 5px;
    font-size: 2rem;
  }

/*professiona;l log*/
  .com_log {
    width: 42%;
    margin: 0 auto 60px;
  }
  .com_log img {
    border-radius: 8px;
  }
}


/* ==========================================================================//

// フッター

// ========================================================================== */

footer {
  text-align: center;
  border-top: 4px solid #00A0E9;
  padding: calc(35 * 100vw / 750) 0 calc(25 * 100vw / 750);
  position: relative;
}

.footer_logo {
  width: calc(310 * 100vw / 750);
  display: inline-block;
  margin-bottom: calc(55 * 100vw / 750);
}

.btn_contact {
  margin-bottom: calc(50 * 100vw / 750);
}

.btn_contact a {
  border: 1px solid #00A0E9;
  border-radius: 4px;
  color: #00A0E9;
  font-size: 1.4rem;;
  font-weight: bold;
  padding: calc(25 * 100vw / 750) calc(60 * 100vw / 750) calc(25 * 100vw / 750) calc(25 * 100vw / 750);
  text-decoration: none;
  position: relative;
}

.btn_contact a::after {
  position: absolute;
  top: 50%;
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url(/shochu/images/coupon/ico_right_arrow.svg) no-repeat;
  background-size: contain;
  margin: -7px 0 0 5px;
}

.footer_text {
  font-size: 1.4rem;
  font-weight: bold;
}

.footer_text a {
  text-decoration: none;
}

.pagetop {
  width: 54px;
  position: fixed;
  bottom: 2%;
  right: 2%;
  cursor: pointer;
  opacity: .9;
}

.copyright {
  font-size: 1.2rem;
}

/* iPad(768px) - iPad Pro/PC(1024px) */
@media screen and (min-width: 768px) {
  footer {
    padding: 25px 0 20px;
  }
  .footer_logo {
    width: 180px;
    margin-bottom: 32px;
  }
  .btn_contact {
    margin-bottom: 40px;
  }
  .btn_contact a {
    padding: 15px 35px 15px 15px;
  }
  .btn_contact a:hover {
    background-color: #fef0e7;
    transition-duration: .6s;
  }
  .footer_text a:hover {
    text-decoration: underline;
  }
  .pagetop a:hover{
    opacity: .9;
  }
}


/* ==========================================================================//

// 季節ごとに変化があるレイアウト・共通設定
※bodyにclassを付与して対応。（年賀はclassをつけない）

// ========================================================================== */
/* 背景 */
/* iPad(768px) - iPad Pro/PC(1024px) */
@media screen and (min-width: 768px) {
  body.shochu {
    background: #0085DD;
  }
  body.mochu {
    background: #8F82B7;
  }
  body.kanchu {
    background: #BEA049;
  }
}
/* ロゴ */
body .header_logo.shochu {
  width: calc(430 * 100vw / 750);
}
/* body.mochu .header_logo {
}
body.kanchu .header_logo {
} */
@media screen and (min-width: 768px) {
  body .header_logo.shochu {
    width: 322px;
  }
  /* body.mochu .header_logo {
  }
  body.kanchu .header_logo {
  } */
}

body .header_logo.nenga {
  width: calc(430 * 100vw / 750);
}
/* body.mochu .header_logo {
}
body.kanchu .header_logo {
} */
@media screen and (min-width: 768px) {
  body .header_logo.nenga {
    width: 272px;
  }
  /* body.mochu .header_logo {
  }
  body.kanchu .header_logo {
  } */
}

/* クーポンタイトル */
body.shochu .keyvisual strong {
  background: linear-gradient(transparent 70%, rgba(119,195,245,.5) 70%);
}
body.mochu .keyvisual strong {
  background: linear-gradient(transparent 70%, rgba(143,130,183,.5) 70%);
}
body.kanchu .keyvisual strong {
  background: linear-gradient(transparent 70%, rgba(190,160,73,.5) 70%);
}