@charset "utf-8";
#onetrust-banner-sdk {display: none;}
:root {
  --spv: / 393 * 100vw;
  --spp: / 393 * 100%;
}

/* -------------------------------------------------
  font
------------------------------------------------- */

/* google fonts */

@font-face {
  font-family: 'ZenKakuGothicAntique';
  font-weight: 400;
  font-style: normal;
  src: url('/marine/lp_boat-license/font/Zen_Kaku_Gothic_Antique/ZenKakuGothicAntique-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'ZenKakuGothicAntique';
  font-weight: 500;
  font-style: normal;
  src: url('/marine/lp_boat-license/font/Zen_Kaku_Gothic_Antique/ZenKakuGothicAntique-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'ZenKakuGothicAntique';
  font-weight: 700;
  font-style: normal;
  src: url('/marine/lp_boat-license/font/Zen_Kaku_Gothic_Antique/ZenKakuGothicAntique-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'ZenKakuGothicAntique';
  font-weight: 900;
  font-style: normal;
  src: url('/marine/lp_boat-license/font/Zen_Kaku_Gothic_Antique/ZenKakuGothicAntique-Black.ttf') format('truetype');
}

/* -------------------------------------------------
  base
------------------------------------------------- */

#cp-area {
  font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-weight: 500;
}
#cp-area * {
  box-sizing: border-box;
}

#cp-area h2,
#cp-area h3,
#cp-area h4,
#cp-area li,
#cp-area p,
#cp-area th,
#cp-area td {
  line-height: 1;
}

#cp-area h2,
#cp-area h3,
#cp-area h4 {
  margin-bottom: 0;
}

#cp-area ul,
#cp-area ol {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#cp-area img {
  max-width: 100%;
}

.white-box {
  width: 96%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px calc(58 / 1200 * 100%) 60px;
  background: #fff;
  border-radius: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

#rwd-content #rwd-main-content {
  margin-bottom: 0;
}

@media print, screen and (min-width: 768px) {
  #cp-area {
    max-width: 1366px;
    margin: 0 auto;
  }
  .box904 {
    width: 96%;
    max-width: 904px;
    margin: 0 auto;
    position: relative;
  }
  footer {
    max-width: 1366px;
    margin: 0 auto;
    padding-bottom: 80px;
  }
}

@media print, screen and (min-width: 1221px) and (max-width: 1380px) {
  #rwd-content .rwd-header-inner {
    width: 98%;
  }
}

@media screen and (max-width: 767px) {
  #rwd-content .rwd-main-content {
    margin-bottom: 0;
  }
  #cp-area {
    margin-top: -55px;
  }
  .white-box {
    width: calc(373 var(--spp));
    padding: calc(35 var(--spv)) calc(10 / 373 * 100%) calc(57 var(--spv));
  }
  .box-sp {
    width: calc(351 var(--spp));
    margin: 0 auto;
    position: relative;
  }
  
  #rwd-content .rwd-footer-copy.rwd-pt {
    padding-bottom: calc( 14px + calc(48 var(--spv)) );
  }
}

/* -------------------------------------------------
  ヘッダーロゴ調整
------------------------------------------------- */

@media print, screen and (min-width: 768px) {
  #rwd-content .rwd-header-inner {
    max-width: 1310px;
  }
  #rwd-content .rwd-header-identify {
    padding-top: 24px;
  }
}

/* -------------------------------------------------
  リード
------------------------------------------------- */

#rwd-content #lead {
  padding-top: 51px;
  text-align: center;
}
#rwd-content #lead .headline img {
  width: 634px;
}
#rwd-content #lead p {
  margin-top: 39px;
  font-size: 2rem;
  line-height: calc(34 / 20);
  font-weight: bold;
  color: #101C7C;
}

@media screen and (max-width: 767px) {
  #rwd-content #lead {
    padding-top: calc(40 var(--spv));
  }
  #rwd-content #lead .headline img {
    width: calc(236 var(--spv));
  }
  #rwd-content #lead p {
    margin-top: calc(20 var(--spv));
    font-size: calc(16 var(--spv));
    line-height: calc(28 / 16);
  }
}

/* -------------------------------------------------
  ボート免許って、実は手軽なの知ってました？
------------------------------------------------- */

#rwd-content #easy {
  padding: 175px 0 154px;
  position: relative;
}
#rwd-content #easy::before,
#rwd-content #easy::after {
  width: 100%;
  content: "";
  display: block;
  left: 0;
  position: absolute;
}
#rwd-content #easy::before {
  z-index: 4;
}
#rwd-content #easy::after {
  height: calc(100% - 177px - 262px);
  bottom: 0;
  z-index: 2;
  background: linear-gradient(180deg, #C6EBFF 0%, #ffffff 100%);
}

#rwd-content #easy .pic1 {
  width: 96%;
  max-width: 1178px;
  margin: 0 auto;
  display: block;
  position: relative;
  z-index: 6;
}

#rwd-content #easy .h-wrap {
  position: relative;
  z-index: 6;
}
#rwd-content #easy .h-wrap .lead {
  font-size: 2rem;
  line-height: calc(30 / 20);
  font-weight: bold;
}

#rwd-content #easy .points {
  position: relative;
  z-index: 6;
}
#rwd-content #easy .point {
  padding: 20px 16px 30px;
  background: #fff;
  border: solid 3px #ADD2FD;
  border-radius: 36px;
}
#rwd-content #easy .point .title .text1 {
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background: #FCE429;
  display: block;
  position: relative;
}
#rwd-content #easy .point .title .text1 span {
  display: block;
  color: #101C7C;
  font-size: 2.6rem;
  font-weight: bold;
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%,-50%);
  white-space: nowrap;
}
#rwd-content #easy .point:nth-child(3) .title .text1 span {
  letter-spacing: -0.1em;
}
#rwd-content #easy .point .title .text2 {
  color: #101C7C;
  font-size: 2.8rem;
  line-height: 1.2;
  display: block;
  text-align: center;
  font-weight: bold;
}
#rwd-content #easy .point .title .text2 strong {
  font-size: 3.5rem;
}
#rwd-content #easy .point .texts {
  margin: 22px 16px 0;
}
#rwd-content #easy .point .desc,
#rwd-content #easy .point .note {
  font-size: 1.8rem;
  line-height: calc(27 / 18);
}

@media print, screen and (min-width: 768px) {
  #rwd-content #easy::before {
    height: calc(467px / 3 * 2);
    background: url("/marine/lp_boat-license/img/bg_wave_01.png") no-repeat center top / auto 100%;
    top: -10px;
  }
  
  #rwd-content #easy .h-wrap {
    width: 94%;
    max-width: 1089px;
    margin: 70px auto 0;
    position: relative;
    text-align: right;
  }
  #rwd-content #easy .h-wrap::after {
    width: calc(721 / 1089 * 100%);
    height: 100%;
    border-radius: 36px;
    background: rgba(247,253,255,0.8);
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
  }
  #rwd-content #easy .h-wrap .headline {
    width: calc(560 / 1089 * 100%);
    position: absolute;
    left: 0;
    top: calc(40 / 212 * 100%);
    z-index: 4;
  }
  #rwd-content #easy .h-wrap .headline img {
    width: 100%;
  }
  #rwd-content #easy .h-wrap .lead {
    width: calc(436 / 1089 * 100%);
    padding: 43px 0 55px;
    margin-left: calc(616 / 1089 * 100%);
    text-align: left;
    position: relative;
    z-index: 4;
  }
  
  #rwd-content #easy .points {
    width: 94%;
    max-width: 1087px;
    margin: 59px auto 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 17px calc(15 / 1087 * 100%);
  }
  #rwd-content #easy .point {
    width: calc(536 / 1087 * 100%);
  }
  #rwd-content #easy .point:last-child {
    width: 718px;
  }
  #rwd-content #easy .point .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #rwd-content #easy .point:last-child .title {
    padding-left: 34px;
  }
  #rwd-content #easy .point .title .text2 {
    width: calc(100% - 117px);
    position: relative;
  }
  #rwd-content #easy .point:last-child .title .text2 {
    width: calc(100% - 151px);
  }
  #rwd-content #easy .point .title .text2::after {
    width: 100%;
    height: 10px;
    background: #91B7FF;
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
  }
}

@media screen and (max-width: 767px) {
  #rwd-content #easy {
    padding: calc(88 var(--spv)) 0 calc(82 var(--spv));
  }
  #rwd-content #easy::before {
    height: calc(172 var(--spv));
    background: url("/marine/lp_boat-license/img/bg_wave_01_sp.png") no-repeat center top / cover;
    top: calc(22 var(--spv));
  }
  #rwd-content #easy::after {
    height: calc(100% - 44.2vw);
  }

  #rwd-content #easy .pic1 {
    width: calc(350 var(--spp));
  }
  
  #rwd-content #easy .h-wrap .headline img {
    width: calc(305 var(--spp));
    margin: calc(24 var(--spv)) auto 0;
    display: block;
  }
  #rwd-content #easy .h-wrap .lead {
    margin-top: 1.4em;
    font-size: calc(16 var(--spv));
    line-height: calc(28 / 16);
    text-align: center;
  }

  #rwd-content #easy .points {
    width: calc(350 var(--spp));
    margin: calc(30 var(--spv)) auto 0;
  }
  #rwd-content #easy .point {
    padding: calc(14 var(--spv)) calc(19 var(--spv)) calc(18 var(--spv));
    background: #fff;
    border-width: calc(3 var(--spv));
    border-radius: calc(21 var(--spv));
  }
  #rwd-content #easy .point + .point {
    margin-top: calc(14 var(--spv));
  }
  #rwd-content #easy .point .title .text1 {
    width: calc(74 var(--spv));
    height: calc(74 var(--spv));
    margin: 0 auto;
  }
  #rwd-content #easy .point .title .text1 span {
    font-size: calc(18 var(--spv));
  }
  #rwd-content #easy .point .title .text2 {
    margin-top: 0.3em;
    padding-bottom: 0.2em;
    font-size: calc(20 var(--spv));
    line-height: calc(34 / 20);
    border-bottom: solid calc(10 var(--spv)) #91B7FF;
  }
  #rwd-content #easy .point .title .text2 strong {
    font-size: calc(26 var(--spv));
  }
  #rwd-content #easy .point .texts {
    margin: calc(15 var(--spv)) 0 0;
  }
  #rwd-content #easy .point .desc,
  #rwd-content #easy .point .note {
    font-size: calc(16 var(--spv));
    line-height: calc(24 / 16);
  }
}

/* -------------------------------------------------
  ボート免許＝海へのパスポート　どこで手に入れる？
------------------------------------------------- */

#rwd-content #licence {
  text-align: center;
  position: relative;
  z-index: 4;
}
#rwd-content #licence .desc {
  margin-top: 35px;
  font-size: 2rem;
  line-height: calc(30 / 20);
}
#rwd-content #licence .desc strong {
  font-size: 2rem;
  line-height: calc(30 / 20);
}
#rwd-content #licence .arrow {
  width: 121px;
  margin: 37px auto 0;
  display: block;
}

@media print, screen and (min-width: 768px) {
  #rwd-content #licence {
    margin-top: -59px;
    padding-top: 28px;
    background:
      url("/marine/lp_boat-license/img/pic_licence.png") no-repeat center top / auto 316px,
      url("/marine/lp_boat-license/img/bg_wave_02.png") no-repeat center 52px / auto 184px;
  }
}

@media screen and (max-width: 767px) {
  #rwd-content #licence {
    margin-top: calc(-50 var(--spv));
    padding-top: calc(308 var(--spp));
    background:
      url("/marine/lp_boat-license/img/pic_licence_sp.png") no-repeat center top / calc(345 var(--spv)) auto,
      url("/marine/lp_boat-license/img/bg_wave_02_sp.png") no-repeat center calc(342 var(--spv)) / 100% auto;
  }
  #rwd-content #licence .headilne img {
    width: calc(251 var(--spp));
  }
  #rwd-content #licence .desc {
    margin-top: calc(40 var(--spv));
    font-size: calc(16 var(--spv));
    line-height: calc(24 / 16);
  }
  #rwd-content #licence .desc strong {
    font-size: calc(16 var(--spv));
    line-height: calc(24 / 16);
  }
  #rwd-content #licence .arrow {
    width: calc(76 var(--spv));
    margin: calc(24 var(--spv)) auto 0;
  }
}

/* -------------------------------------------------
  選ばれる3つのポイント
------------------------------------------------- */

#rwd-content #points3 {
  padding: 120px 0 80px;
  position: relative;
}
#rwd-content #points3::before,
#rwd-content #points3::after {
  width: 100%;
  content: "";
  display: block;
  position: absolute;
  left: 0;
}
#rwd-content #points3::before { /* グラデーション */
  height: calc(100% - 727px);
  z-index: 2;
  background: linear-gradient(180deg, #D1DEFF 0%, #FFF 100%);
  top: 727px;
}

#rwd-content #points3 .headline {
  text-align: center;
  position: relative;
  z-index: 6;
}
#rwd-content #points3 .headline img {
  width: 701px;
}

#rwd-content #points3 .lead {
  margin-top: 1.2em;
  font-size: 1.8rem;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 6;
}

#rwd-content #points3 .points {
  margin-top: 360px;
  position: relative;
  z-index: 6;
}
#rwd-content #points3 .point {
  padding: 34px 30px 34px 150px;
  position: relative;
  background: #fff;
  border: solid 3px #091C7C;
  border-radius: 20px;
}
#rwd-content #points3 .point + .point {
  margin-top: 34px;
}

#rwd-content #points3 .point .headline2 .num {
  width: 103px;
  position: absolute;
  left: 31px;
  top: 27px;
}
#rwd-content #points3 .point .headline2 .title {
  font-size: 2.4rem;
  line-height: calc(30 / 24);
  color: #091C7C;
  font-weight: bold;
}

#rwd-content #points3 .point .texts .desc {
  margin-top: 1.1em;
  font-size: 1.8rem;
  line-height: calc(30 / 18);
}
#rwd-content #points3 .point .texts dl dt {
  margin-top: 15px;
  color: #091C7C;
  font-size: 1.6rem;
  font-weight: bold;
}
#rwd-content #points3 .point .texts dl dt strong {
  font-weight: bold;
  font-size: 2rem;
}
#rwd-content #points3 .point .texts dl dd {
  font-size: 1.8rem;
  line-height: calc(31 / 18);
}

#rwd-content #points3 .btn {
  height: 115px;
  margin-top: 79px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 6;
  background: #E52983;
  color: #fff;
  border-radius: 20px;
  box-shadow: 0 3px 15px rgba(0,0,0,0.3);
  transition: background 0.2s ease-out;
}
#rwd-content #points3 .btn span {
  font-size: 2.8rem;
  font-weight: 700;
  font-family: 'ZenKakuGothicAntique';
  position: relative;
  display: block;
}
#rwd-content #points3 .btn span::before,
#rwd-content #points3 .btn span::after {
  content: "";
  display: block;
  width: 22px;
  height: 30px;
  background: url("/marine/lp_boat-license/img/deco_001.svg") no-repeat 0 0 / 100% auto;
  position: absolute;
  top: 9px;
}
#rwd-content #points3 .btn span::before {
  left: -40px;
}
#rwd-content #points3 .btn span::after {
  right: -30px;
  transform: rotateY(180deg);
}

@media print, screen and (min-width: 768px) {
  #rwd-content #points3::after { /* ボートの画像 */
    height: 928px;
    background: url("/marine/lp_boat-license/img/bg_points3.jpg") no-repeat center top / 1366px auto;
    top: 0;
    z-index: 4;
  }
  #rwd-content #points3 .btn:hover {
    background: #F75500;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 890px) {
  #rwd-content #points3 .btn span {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 767px) {
  #rwd-content #points3 {
    padding: calc(60 var(--spv)) 0 calc(220 var(--spv));
    margin-top: calc(17 var(--spv));
  }
  #rwd-content #points3::after { /* ボートの画像 */
    height: calc(582 var(--spv));
    background: url("/marine/lp_boat-license/img/bg_points3_sp.jpg") no-repeat center top / 100% auto;
    top: 0;
    z-index: 4;
  }
  #rwd-content #points3::before { /* グラデーション */
    height: calc(1868 var(--spv));
    top: calc(400 var(--spv));
  }

  #rwd-content #points3 .headline img {
    width: calc(277 var(--spp));
  }

  #rwd-content #points3 .lead {
    display: none;
  }

  #rwd-content #points3 .points {
    margin-top: calc(220 var(--spv));
  }
  #rwd-content #points3 .point {
    padding: calc(26 var(--spv)) calc(16 var(--spv)) calc(23 var(--spv));
    border-width: calc(3 var(--spv));
    border-radius: calc(20 var(--spv));
  }
  #rwd-content #points3 .point + .point {
    margin-top: calc(22 var(--spv));
  }

  #rwd-content #points3 .point .headline2 .num {
    width: calc(65 var(--spv));
    position: static;
    display: block;
    margin: 0 auto;
  }
  #rwd-content #points3 .point .headline2 .title {
    margin-top: 0.9em;
    font-size: calc(18 var(--spv));
    line-height: calc(30 / 18);
    display: block;
  }

  #rwd-content #points3 .point .texts .desc {
    margin-top: 1.1em;
    font-size: calc(16 var(--spv));
    line-height: calc(24 / 16);
  }
  #rwd-content #points3 .point .texts dl dt {
    margin-top: 1.1em;
    font-size: calc(16 var(--spv));
    line-height: calc(24 / 16);
  }
  #rwd-content #points3 .point .texts dl dt strong {
    font-size: calc(16 var(--spv));
    line-height: calc(24 / 16);
  }
  #rwd-content #points3 .point .texts dl dd {
    margin-top: 0.5em;
    font-size: calc(16 var(--spv));
    line-height: calc(24 / 16);
  }

  #rwd-content #points3 .btn {
    height: calc(96 var(--spv));
    margin-top: calc(55 var(--spv));
    border-radius: calc(20 var(--spv));
    box-shadow: 0 calc(3 var(--spv)) calc(15 var(--spv)) rgba(0,0,0,0.3);
    transition: background 0.2s ease-out;
  }
  #rwd-content #points3 .btn span {
    font-size: calc(18 var(--spv));
    line-height: calc(25 / 18);
    transform: translateX( calc(7 var(--spv)) ); /* (32 - 18) / 2 */
  }
  #rwd-content #points3 .btn span::before,
  #rwd-content #points3 .btn span::after {
    width: calc(22 var(--spv));
    height: calc(30 var(--spv));
    top: calc(11 var(--spv));
  }
  #rwd-content #points3 .btn span::before {
    left: calc(-32 var(--spv));
  }
  #rwd-content #points3 .btn span::after {
    right: calc(-18 var(--spv));
  }
}

/* -------------------------------------------------
  セミナー
------------------------------------------------- */

#rwd-content #seminar {
  padding: 90px 0 107px;
  text-align: center;
  background: #FFF3E6;
}

#rwd-content #seminar .headline {
  color: #091C7C;
}
#rwd-content #seminar .headline .small {
  font-size: 2.8rem;
  display: block;
}
#rwd-content #seminar .headline .large {
  margin-top: 0.9em;
  font-size: 3.4rem;
  font-family: 'ZenKakuGothicAntique';
  font-weight: 700;
  display: block;
}

#rwd-content #seminar .desc {
  margin-top: 1.5em;
  font-size: 2rem;
  line-height: calc(30 / 20);
}

#rwd-content #seminar dl {
  text-align: left;
}
#rwd-content #seminar dl dt {
  padding-left: 10px;
  font-size: 1.8rem;
  font-weight: bold;
  border-left: solid 8px #4D72ED;
}
#rwd-content #seminar dl dd {
  font-size: 1.8rem;
}

#rwd-content #seminar .desc2 {
  margin-top: 52px;
  padding: 19px 0;
  background: #fff;
  border: solid 3px #519AF0;
  border-radius: 22px;
}
#rwd-content #seminar .desc2 p {
  font-size: 1.8rem;
  line-height: calc(31 / 18);
  color: #091C7C;
}

#rwd-content #seminar .btn {
  width: 628px;
  height: 115px;
  margin: 62px auto 0;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0058E5;
  box-shadow: 0 3px 15px 0 rgba(0,0,0,0.3);
  font-weight: 900;
  color: #fff;
  transition: background 0.2s ease-out;
}
#rwd-content #seminar .btn span {
  display: inline-block;
  font-size: 2.6rem;
  font-family: 'ZenKakuGothicAntique';
}

@media print, screen and (min-width: 768px) {
  #rwd-content #seminar .group {
    width: 96%;
    max-width: 773px;
    margin: 28px auto 0;
  }
  #rwd-content #seminar dl {
    display: flex;
    flex-wrap: wrap;
  }
  #rwd-content #seminar dl dt {
    width: 80px;
  }
  #rwd-content #seminar dl dd {
    width: calc(100% - 80px);
  }
  #rwd-content #seminar dl dt:not(:first-of-type),
  #rwd-content #seminar dl dd:not(:first-of-type) {
    margin-top: 17px;
  }
  #rwd-content #seminar .btn:hover {
    background: #008CB5;
  }
}

@media screen and (max-width: 767px) {
  #rwd-content #seminar {
    margin-top: -40vw;
    padding: calc(46 var(--spv)) 0 calc(85 var(--spv));
    position: relative;
    z-index: 2;
  }

  #rwd-content #seminar .headline .small {
    font-size: calc(22 var(--spv));
    line-height: calc(30 / 22);
  }
  #rwd-content #seminar .headline .large {
    margin-top: calc(29 var(--spv));
    font-size: calc(24 var(--spv));
    line-height: calc(32 / 24);
  }

  #rwd-content #seminar .desc {
    margin-top: 2em;
    font-size: calc(16 var(--spv));
    line-height: calc(24 / 16);
    text-align: left;
  }

  #rwd-content #seminar dl {
    margin-top: calc(27 var(--spv));
  }
  #rwd-content #seminar dl dt {
    padding-left: calc(8 var(--spv));
    font-size: calc(16 var(--spv));
    line-height: calc(24 / 16);
    border-width: calc(8 var(--spv));
  }
  #rwd-content #seminar dl dd {
    margin-left: calc(16 var(--spv));
    font-size: calc(16 var(--spv));
    line-height: calc(24 / 16);
  }
  #rwd-content #seminar dl dt:not(:first-of-type) {
    margin-top: calc(25 var(--spv));
  }

  #rwd-content #seminar .desc2 {
    margin-top: calc(35 var(--spv));
    padding: calc(21 var(--spv)) calc(20 var(--spv));
    border-width: calc(3 var(--spv));
    border-radius: calc(13 var(--spv));
  }
  #rwd-content #seminar .desc2 p {
    font-size: calc(16 var(--spv));
    line-height: calc(24 / 16);
    text-align: left;
  }

  #rwd-content #seminar .btn {
    width: 100%;
    height: calc(106 var(--spv));
    margin: calc(49 var(--spv)) auto 0;
    border-radius: calc(20 var(--spv));
    box-shadow: 0 calc(3 var(--spv)) calc(15 var(--spv)) 0 rgba(0,0,0,0.3);
  }
  #rwd-content #seminar .btn span {
    text-align: left;
    font-size: calc(20 var(--spv));
    line-height: calc(26 / 20);
  }
}

/* -------------------------------------------------
  ガイドブック
------------------------------------------------- */

#rwd-content #guidebook {
  padding: 65px 0 72px;
}

#rwd-content #guidebook .headline span {
  color: #091C7C;
  font-weight: bold;
  display: block;
}
#rwd-content #guidebook .headline .small {
  font-size: 2.2rem;
}
#rwd-content #guidebook .headline .large {
  margin-top: 0.5em;
  font-size: 3.2rem;
  line-height: 1.2;
}

#rwd-content #guidebook .desc {
  margin-top: 35px;
  font-size: 1.8rem;
  line-height: calc(29 / 18);
}

#rwd-content #guidebook .pic img {
  width: 201px;
  box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16);
}

@media print, screen and (min-width: 768px) {
  #rwd-content #guidebook .col2 {
    display: flex;
    justify-content: space-between;
  }
  #rwd-content #guidebook .texts {
    width: calc(100% - 231px);
    padding-top: 18px;
  }
  #rwd-content #guidebook .pic {
    width: 201px;
  }
}

@media screen and (max-width: 767px) {
  #rwd-content #guidebook {
    padding: calc(50 var(--spv)) 0;
  }

  #rwd-content #guidebook .headline {
    text-align: center;
  }
  #rwd-content #guidebook .headline .small {
    font-size: calc(18 var(--spv));
  }
  #rwd-content #guidebook .headline .large {
    margin-top: 0.6em;
    font-size: calc(22 var(--spv));
    line-height: calc(30 / 22);
  }

  #rwd-content #guidebook .desc {
    margin-top: calc(24 var(--spv));
    font-size: calc(16 var(--spv));
    line-height: calc(24 / 16);
    text-align: left;
  }

  #rwd-content #guidebook .pic img {
    width: calc(159 var(--spv));
    margin: calc(11 var(--spv)) auto 0;
    box-shadow: 0 calc(3 var(--spv)) calc(6 var(--spv)) 0 rgba(0,0,0,0.16);
    display: block;
  }
}

/* -------------------------------------------------
  サポート
------------------------------------------------- */

@media print, screen and (min-width: 768px) {
  #support {
    height: 752px;
    background: url("/marine/lp_boat-license/img/bg_support.jpg") no-repeat center top / auto 100%;
  }
  #support .text-wrap {
    width: 96%;
    max-width: 1088px;
    height: 100%;
    margin: 0 auto;
    position: relative;
  }
  #support .texts {
    width: 536px;
    height: calc(100% - 144px);
    padding-top: 111px;
    background: rgba(255,255,255,0.62);
    position: absolute;
    left: 0;
    bottom: 0;
  }
  #support .texts .headline {
    text-align: center;
  }
  #support .texts .headline img {
    width: 466px;
  }
  #support .texts .desc {
    width: 482px;
    margin: 130px auto 0;
    font-size: 2rem;
    line-height: calc(30 / 20);
  }
}

@media screen and (max-width: 767px) {
  #support {
    height: calc(362 var(--spv));
    background: url("/marine/lp_boat-license/img/bg_support_sp.jpg") no-repeat center top / cover;
  }
  #support .texts .headline {
    padding-top: calc(120 var(--spv));
  }
  #support .texts .headline img {
    width: calc(251 var(--spp));
    margin-left: calc(20 var(--spp));
  }
}

/* -------------------------------------------------
  シースタイル
------------------------------------------------- */

#sea-style {
  padding: 84px 0 78px;
  background: linear-gradient(180deg, #ffffff 0%, #BCFAFF 100%);
}

#sea-style .headline {
  text-align: center;
}
#sea-style .headline img {
  width: 689px;
}

#sea-style .desc {
  margin-top: 28px;
  font-size: 2rem;
  line-height: calc(30 / 20);
}

#sea-style .cam {
  margin-top: 42px;
  padding: 50px 207px 43px 30px;
  background: #fff;
  border-radius: 36px;
  border: solid 3px #AED2FD;
  position: relative;
}
#sea-style .cam .cam-title {
  color: #091C7C;
  font-size: 2.8rem;
}
#sea-style .cam .cam-title .w {
  font-size: 2.8rem;
  white-space: nowrap;
}
#sea-style .cam .cam-title .large {
  font-size: 3.4rem;
}
#sea-style .cam p {
  margin-top: 26px;
  font-size: 1.8rem;
  line-height: calc(27 / 18);
}
#sea-style .cam::after {
  width: 205px;
  height: 298px;
  content: "";
  display: block;
  background: url("/marine/lp_boat-license/img/fig_coupon.svg") no-repeat 0 0 / 100% auto;
  position: absolute;
  right: 0;
  top: -42px;
}

@media screen and (max-width: 767px) {
  #sea-style {
    padding: calc(76 var(--spv)) 0 calc(72 var(--spv));
  }
  #sea-style .headline img {
    width: calc(240 var(--spv));
  }

  #sea-style .desc {
    margin-top: calc(31 var(--spv));
    font-size: calc(16 var(--spv));
    line-height: calc(24 / 16);
  }

  #sea-style .cam {
    margin-top: calc(36 var(--spv));
    padding: calc(33 var(--spv)) calc(19 var(--spv)) calc(225 var(--spv));
    border-radius: calc(27 var(--spv));
    border-width: calc(3 var(--spv));
  }
  #sea-style .cam .cam-title {
    font-size: calc(20 var(--spv));
    font-weight: bold;
  }
  #sea-style .cam .cam-title .w {
    margin: calc(4 var(--spv)) 0 0 calc(26 var(--spv));
    font-size: calc(20 var(--spv));
    display: inline-block;
  }
  #sea-style .cam .cam-title .large {
    font-size: calc(34 var(--spv));
  }
  #sea-style .cam p {
    margin-top: calc(31 var(--spv));
    font-size: calc(16 var(--spv));
    line-height: calc(24 / 16);
  }
  #sea-style .cam::after {
    width: calc(154 var(--spv));
    height: calc(224 var(--spv));
    right: 50%;
    top: auto;
    bottom: calc(-37 var(--spv));
    transform: translateX(50%);
  }
}

/* -------------------------------------------------
  最下部エリア
------------------------------------------------- */

#rwd-content #bottom-area .copy {
  margin: 0 auto;
  display: block;
}
#rwd-content #bottom-area .desc {
  margin-top: 1.5em;
  text-align: center;
  font-size: 2.2rem;
  color: #fff;
  line-height: calc(42 / 22);
}

@media print, screen and (min-width: 768px) {
  #rwd-content #bottom-area {
    height: 844px;
    padding-top: 83px;
    border-bottom: solid 1px #fff;
    background: url("/marine/lp_boat-license/img/bg_bottom.jpg") no-repeat center center / cover;
  }
}

@media screen and (max-width: 767px) {
  #rwd-content #bottom-area {
    height: calc(664 var(--spv));
    padding-top: calc(61 var(--spv));
    border-bottom: solid 1px #fff;
    background: url("/marine/lp_boat-license/img/bg_bottom_sp.jpg") no-repeat center center / cover;
  }
  #rwd-content #bottom-area .copy {
    width: calc(258 var(--spp));
  }
  #rwd-content #bottom-area .desc {
    margin: 2em 1.2em 0;
    text-align: left;
    font-size: calc(16 var(--spv));
    line-height: calc(27 / 16);
  }
}

/* -------------------------------------------------
  .pagetop-area
------------------------------------------------- */

.pagetop-area {
  height: 0;
  background: #FFF5F7;
  position: relative;
}
.pagetop-area a {
  width: 67px;
  height: 67px;
  background: #192FA5;
  border-radius: 25px;
  display: block;
  position: absolute;
  right: 20px;
  bottom: 22px;
  box-shadow: 0 3px 10px 0 rgba(0,0,0,0.15);
  transition: background 0.2s ease-out;
}
.pagetop-area a::after {
  width: 16px;
  height: 16px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  content: "";
  transform: translate(-45%,-30%) rotate(-45deg);
}

@media print, screen and (min-width: 768px) {
  .pagetop-area a:hover {
    background: #3799dd;
  }
}

@media screen and (max-width: 767px) {
  .pagetop-area a {
    width: calc(48 var(--spv));
    height: calc(48 var(--spv));
    border-radius: 50%;
    right: calc(9 var(--spv));
    bottom: calc(13 var(--spv));
  }
  .pagetop-area a::after {
    width: calc(11 var(--spv));
    height: calc(11 var(--spv));
  }
}

/* -------------------------------------------------
  下部固定ボタン
------------------------------------------------- */

.bottom-fix-btn {
  width: 100%;
  max-width: 1366px;
  height: 80px;
  background: rgba(255,255,255,0.87);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 0;
  transform: translate(-50%,100%);
  transition: transform 0.4s ease-out;
}
.bottom-fix-btn.on {
  transform: translate(-50%,0);
}
#rwd-content .bottom-fix-btn a {
  width: 577px;
  height: 45px;
  border-radius: 23px;
  background: #E52983;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  transition: background 0.2s ease-out;
}
#rwd-content .bottom-fix-btn a span {
  font-size: 1.8rem;
  font-family: 'ZenKakuGothicAntique';
  font-weight: 900;
  position: relative;
  display: inline-block;
}
#rwd-content .bottom-fix-btn a span::before,
#rwd-content .bottom-fix-btn a span::after {
  content: "";
  display: block;
  width: 16px;
  height: 21px;
  background: url("/marine/lp_boat-license/img/deco_001.svg") no-repeat 0 0 / 100% auto;
  position: absolute;
  top: 3px;
}
#rwd-content .bottom-fix-btn a span::before {
  left: -24px;
}
#rwd-content .bottom-fix-btn a span::after {
  right: -20px;
  transform: rotateY(180deg);
}

@media print, screen and (min-width: 768px) {
  #rwd-content .bottom-fix-btn a:hover {
    background: #F75500;
  }
}

@media screen and (max-width: 767px) {
  .bottom-fix-btn {
    height: calc(49 var(--spv));
    background: #fff;
  }
  #rwd-content .bottom-fix-btn a {
    width: 100%;
    height: calc(49 var(--spv));
    border-radius: 0;
    border-top: solid 1px #fff;
    position: relative;
  }
  #rwd-content .bottom-fix-btn a::after {
    width: 0;
    height: 0;
    content: "";
    display: block;
    border-width: calc(8 var(--spv)) 0 calc(8 var(--spv)) calc(12 var(--spv));
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    position: absolute;
    right: calc(23 var(--spv));
    top: 50%;
    transform: translateY(-50%);
  }
  #rwd-content .bottom-fix-btn a span {
    font-size: calc(15 var(--spv));
    line-height: calc(19 / 15);
    font-weight: 500;
  }
  #rwd-content .bottom-fix-btn a span::before,
  #rwd-content .bottom-fix-btn a span::after {
    width: calc(16 var(--spv));
    height: calc(21 var(--spv));
    top: calc(8 var(--spv));;
  }
  #rwd-content .bottom-fix-btn a span::before {
    left: calc(-29 var(--spv));
  }
  #rwd-content .bottom-fix-btn a span::after {
    right: calc(-16 var(--spv));
  }
}