@charset "utf-8";

/* --------------------
Common
-------------------- */

.layout_main section {
  margin: 0;
  padding: 56px 0;
}

.cb {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.hl {
  color: #163954;
  display: flex;
  font-size: 28px;
  justify-content: center;
  line-height: 1.5;
  margin-bottom: 40px;
}

.btn {
  width: 350px;
}

div.note span {
  margin-right: 5px;
}

div.note p {
  padding-left: 17px;
  text-indent: -17px;
  font-size: 12px;
}

small.note {
  display: block;
  padding-left: 17px;
  text-indent: -17px;
  font-size: 12px;
}

small.note span {
  margin-right: 5px;
}

@media (max-width: 599px) {
  .cb {
    width: calc(100% - 40px);
  }

  .hl {
    text-align: center;
  }

  .btn {
    max-width: 100%;
  }
}

/* -----------------
  Section
------------------- */

.layout_main > .section:nth-child(2n) {
  background-color: #f6f6f6;
}

/* --------------------
Hero
-------------------- */

.hero {
  height: 340px;
  text-align: center;
  background-color: #faf5f0;
  background-image: url(../images/hero_orange_left.svg), url(../images/hero_orange_right.svg);
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right bottom;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.75;
}

.hero_heading {
  color: #163954;
  font-size: 36px;
  padding: 0;
}

.hero_text {
  color: #163954;
  font-size: 17px;
  margin: 32px 0 0;
}

.hero_buttons {
  margin: 40px 0 0;
  display: flex;
  justify-content: center;
}

.hero_button {
  font-size: 22px;
  border-radius: 3px;
  margin: 0 16px;
  line-height: 1.5;
}

.hero_button:hover {
  opacity: 0.7;
}

.hero_button small {
  font-size: 14px;
  display: block;
}

.hero_cta {
  background-color: #f80;
  color: #fff;
  text-decoration: none;
  border: 1px solid #f80;
  min-width: 300px;
  padding: 0.5em 1em 0.4em;
}

.hero_button_inner {
  display: block;
}

.hero_beginner {
  background-color: #fff;
  color: #426077;
  text-decoration: none;
  text-align: left;
  border: 1px solid #718492;
  display: flex;
  padding: 0.5em 1.2em 0.4em 1em;
  justify-content: center;
}

.hero_beginner::before {
  content: "";
  display: block;
  background: url(../images/icon_wakaba.svg) no-repeat border-box center 50%/contain;
  width: 44px;
  height: 44px;
  align-self: center;
  margin: 0 10px 0 0;
}

@media all and (-ms-high-contrast: none) {
  .hero_button {
    padding-top: 0.6em;
    padding-bottom: 0.2em;
  }

  .hero_beginner::before {
    margin-bottom: 0.3em;
  }
}

@media (max-width: 599px) {
  .hero {
    height: auto;
    background-size: 30%, 30%;
  }

  .hero_heading {
    font-size: 24px;
    word-break: keep-all;
  }

  .hero_text {
    word-break: keep-all;
  }

  .hero_buttons {
    flex-direction: column;
  }

  .hero_button {
    font-size: 18px;
  }

  .hero_cta {
    margin: 0;
    min-width: auto;
  }

  .hero_beginner {
    margin: 16px 0 0;
  }

  .hero_beginner::before {
    width: 26px;
    height: 26px;
  }
}

/* --------------------
News
-------------------- */

#news {
  padding: 44px 0;
  font-size: 12px;
}

#news dl {
  display: flex;
  align-items: center;
}

#news dl:nth-of-type(1n+2) {
  margin-top: 8px;
}

#news span {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f80;
  color: #fff;
  font-size: 10px;
  min-width: 40px;
  height: 17px;
  border-radius: 3px;
  visibility: hidden;
}

#news dl.new span {
  visibility: visible;
}

#news dt {
  min-width: 89px;
  margin-left: 10px;
}

#news dd a:link {
  color: #568cc5;
  text-decoration: none;
}

#news dd a:hover {
  text-decoration: underline;
}

/* --------------------
Banner
-------------------- */

aside.bnr {
  padding: 56px 0 0;
}

aside.bnr img {
  width: 100%;
  max-width: 960px;
}

aside.bnr a:hover {
  opacity: 0.7;
}

@media (max-width: 599px) {
  aside.bnr {
    padding: 21px 0;
  }
}

/* --------------------
Lineup
-------------------- */

#lineup .group {
  display: flex;
  align-items: flex-end;
}

#lineup .plan {
  position: relative;
  width: 100%;
  max-width: 161px;
  margin-left: -1px;
  border: 1px solid #e2e2e2;
  background: #fff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  box-sizing: border-box;
  z-index: 0;
}

#lineup .plan.premium {
  max-width: 160px;
  border: 1px solid #f80;
  z-index: 1;
}

#lineup .plan:first-of-type {
  margin-left: 0;
}

#lineup .plan h2 a {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 55px;
  padding-bottom: 10px;
  color: #fff;
  background: #fba24a;
  font-size: 14px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  text-decoration: none;
  box-sizing: border-box;
}

#lineup .plan.premium h2 a {
  min-height: 65px;
  background: #f80 url("../images/lineup_label_best_deal.png") no-repeat;
}

#lineup .plan h2 a:hover {
  text-decoration: underline;
}

#lineup .plan div {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: auto;
  min-height: 274px;
  padding: 20px 0;
  box-sizing: border-box;
}

#lineup .plan div header {
  align-items: center;
  min-height: 90px;
  text-align: center;
  font-size: 12px;
}

#lineup .plan div strong {
  display: block;
  font-size: 26px;
}

#lineup .plan div .free_cdn {
  background: #fba24a;
  border-radius: 1.5em;
  color: #fff;
  display: inline-block;
  padding: 0.2em 1em;
}

#lineup .plan.lite div strong {
  margin-top: 0;
}

#lineup .plan.premium div strong {
  color: #f80;
}

#lineup .plan div strong span {
  font-size: 18px;
}

#lineup .plan {
  display: flex;
  flex-direction: column;
}

#lineup .plan div p {
  flex: auto;
  max-width: 100%;
  padding: 0 10px;
  font-size: 12px;
  line-height: 1.8;
  box-sizing: border-box;
}

#lineup .plan div em {
  display: block;
  font-size: 12px;
  font-weight: bold;
  font-style: normal;
  color: #426077;
}

.lineup-order-btn {
  align-items: center;
  background-color: #f80;
  border-radius: 3px;
  color: #fff;
  display: flex;
  font-size: 14px;
  justify-content: center;
  margin-top: 5px;
  padding: 8px 32px;
  text-decoration: none;
}

.lineup-order-btn:hover {
  background: #ffab4d;
}

#lineup .plan ul {
  list-style: none;
}

#lineup .plan li {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  font-size: 12px;
}

#lineup .plan li:nth-of-type(odd) {
  background: #f0f0f0;
}

#lineup .plan li:last-of-type {
  border-bottom: 1px solid #e2e2e2;
}

#lineup .plan li strong {
  margin-left: 5px;
  font-size: 14px;
}

#lineup .plan li span {
  margin-right: 5px;
  padding: 0 5px;
  background: #f80;
  color: #fff;
  font-size: 10px;
  border-radius: 3px;
}

#lineup .plan li .fa {
  margin-left: 8px;
  font-size: 14px;
}

#lineup .plan li .fa-check {
  color: #f80;
}

.lineup-detail-link {
  align-items: center;
  color: #002cb1;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  height: 56px;
  justify-content: center;
  text-decoration: none;
}

.lineup-detail-link:hover {
  text-decoration: underline;
}

#lineup .note {
  margin-top: 8px;
}

#lineup .btn-wrap {
  margin-top: 21px;
}

@media (max-width: 599px) {
  #lineup .group {
    flex-direction: column;
  }

  #lineup .plan {
    max-width: 100%;
  }

  #lineup .plan.premium {
    max-width: 100%;
  }

  #lineup .plan:nth-of-type(1n+2) {
    margin-top: 21px;
  }

  #lineup .plan ul {
    display: none;
  }

  #lineup .plan footer {
    display: none;
  }

  #lineup .plan div {
    min-height: auto;
  }

  #lineup .plan div header {
    min-height: auto;
    margin-bottom: 13px;
  }

  #lineup .plan div strong {
    margin-top: 0;
  }

  .lineup-order-btn {
    font-size: 16px;
  }

  #lineup .plan div p {
    font-size: 14px;
    margin-bottom: 20px;
  }

  #lineup .plan h2 a {
    align-items: center;
    padding-bottom: 0;
    font-size: 20px;
  }

  #lineup .plan.premium h2 a {
    min-height: 55px;
  }
}

/* --------------------
MAIL
-------------------- */

.mail-column {
  align-items: stretch;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  line-height: 1.7;
}

.mail-column .service-type {
  margin-top: 40px;
}

.mail-column .service-name {
  font-size: 16px;
  font-weight: bold;
}

.mail-column .media img {
  filter: drop-shadow(10px 12px 25px #d1ae86);
  -webkit-filter: drop-shadow(10px 12px 25px #d1ae86);
}

.mail-column .media a:hover {
  opacity: 0.7;
}

@media (max-width: 599px) {
  .mail-column .service-type {
    text-align: center;
  }

  .mail-column .service-name {
    display: block;
  }

  .mail-column .media {
    margin-bottom: 24px;
    position: relative;
    width: 100%;
  }

  .mail-column .media a {
    background-color: #fcefe2;
    display: block;
    padding-top: 50%;
  }

  .mail-column .media img {
    bottom: 0;
    box-sizing: border-box;
    height: 100%;
    left: 0;
    margin: auto;
    padding: 31px 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
  }
}

@media (min-width: 600px) {
  .mail-column {
    flex-direction: row;
    justify-content: space-between;
  }

  .mail-column .body {
    width: calc(100% - 460px - 40px);
  }

  .mail-column .service-name {
    margin-right: 14px;
  }

  .mail-column .media a {
    align-items: center;
    background-color: #fcefe2;
    display: flex;
    height: 230px;
    justify-content: center;
    width: 460px;
  }

  .mail-column .detail-btn {
    margin-left: 0;
  }
}

/* --------------------
MANAGE
-------------------- */

.manage-hl {
  font-size: 24px;
  line-height: 1;
}

.manage-column p {
  line-height: 1.5;
}

@media (max-width: 599px) {
  .manage-domain {
    margin-bottom: 40px;
  }

  .manage-hl {
    color: #fff;
    font-size: 24px;
    margin-bottom: 24px;
    padding: calc(50% / 2 - 24px) 0;
    text-align: center;
  }

  .manage-domain .manage-hl {
    background: url(../images/domain-visual_bg.png) 0 / cover no-repeat #1eb8d1;
  }

  .manage-ssl .manage-hl {
    background: url(../images/ssl-visual_bg.png) #eebf00;
  }
}

@media (min-width: 600px) {
  .manage-column {
    color: #fff;
    display: flex;
    justify-content: space-between;
  }

  .manage-domain,
  .manage-ssl {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 230px;
    justify-content: space-between;
    padding: 40px;
    text-align: center;
    width: 460px;
  }

  .manage-domain {
    background: url(../images/domain-visual_bg.png) 0 / cover no-repeat #1eb8d1;
  }

  .manage-ssl {
    background: url(../images/ssl-visual_bg.png) #eebf00;
  }

  .manage-column p {
    font-size: 17px;
  }

  .manage-column .btn {
    border: none;
    margin-top: 0;
  }
}

/* --------------------
Bigginer
-------------------- */

#bigginer ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
}

#bigginer li {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 225px;
}

#bigginer figure a:hover {
  opacity: 0.7;
}

#bigginer li figure img {
  width: 100%;
  max-width: 225px;
}

#bigginer h3 {
  max-width: 100%;
  margin-top: 13px;
  font-size: 16px;
  line-height: 1.45;
}

#bigginer h3 a {
  color: #426077;
  text-decoration: none;
}

#bigginer h3 a:hover {
  text-decoration: underline;
}

#bigginer p {
  max-width: 100%;
  margin-top: 13px;
  font-size: 14px;
  line-height: 1.8;
}

#bigginer small {
  align-self: flex-start;
  margin-top: 8px;
}

@media (max-width: 599px) {
  #bigginer ul {
    flex-direction: column;
    align-items: center;
  }

  #bigginer ul li {
    max-width: 100%;
  }

  #bigginer ul li:nth-of-type(1n+2) {
    margin-top: 20px;
  }
}

/* --------------------
Safety
-------------------- */

.safety-boxes {
  display: flex;
  flex-flow: column wrap;
  list-style: none;
}

.safety-box {
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 100%;
}

.safety-box .box-hl {
  margin: 15px auto;
}

.safety-box .box-description {
  font-size: 15px;
  line-height: 1.6;
}

.safety-box .box-icon {
  order: -1;
}

.safety-banner {
  display: flex;
  flex-direction: column;
  margin-top: 46px;
  text-align: center;
}

.safety-banner .banner-hl {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 0;
}

.safety-banner .banner-description {
  font-size: 12px;
  line-height: 2;
  order: -1;
}

@media (max-width: 599px) {
  .safety-box {
    margin: 0 auto 40px;
  }

  .safety-box:last-child {
    margin-bottom: 0;
  }

  .safety-banner::before {
    background: url(../images/safety_sp.jpg) no-repeat 0 0 / contain;
    content: "";
    display: block;
    margin-bottom: 16px;
    order: -2;
    padding-top: 50%;
    width: 100%;
  }
}

@media only screen and (max-width: 599px) and (-webkit-min-device-pixel-ratio: 2) {
  .safety-banner::before {
    background-image: url(../images/safety_sp-2x.jpg);
  }
}

@media (min-width: 600px) {
  .safety-boxes {
    flex-direction: row;
  }

  .safety-box {
    width: 280px;
  }

  .safety-box:nth-child(2) {
    margin: 0 60px;
  }

  .safety-banner {
    background: url(../images/safety_pc.jpg) no-repeat 0 0 / contain;
    color: #fff;
    justify-content: center;
    height: 230px;
    width: 960px;
  }

  .safety-banner .banner-hl {
    color: inherit;
    font-size: 24px;
    line-height: 2;
  }

  .safety-banner .banner-description {
    font-size: 17px;
    line-height: 24px;
  }
}

@media only screen and (min-width: 600px) and (-webkit-min-device-pixel-ratio: 2) {
  .safety-banner {
    background-image: url(../images/safety_pc-2x.jpg);
  }
}

/* --------------------
Feature
-------------------- */

/* #feature {
  background: #eff4f8;
} */

#feature .lead {
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 14px;
}

#feature ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 910px;
  margin: 40px auto 0;
  list-style: none;
}

#feature li {
  width: 290px;
  height: 245px;
  border-radius: 6px;
}

#feature li:nth-of-type(1n+4) {
  margin-top: 20px;
}

#feature li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  padding: 20px;
  box-sizing: border-box;
  background-color: #f6f6f6;
}

#feature li a:hover {
  opacity: 0.7;
}

#feature li figure {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 64px;
}

#feature li a h3 {
  margin-top: 10px;
  font-size: 16px;
  color: #f80;
  text-align: center;
}

#feature li a p {
  margin-top: 8px;
  font-size: 14px;
  color: #444;
  text-align: center;
}

#feature li a div {
  flex: auto;
}

#feature li a span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 34px;
  background: #426077;
  font-size: 14px;
  color: #fff;
  border-radius: 3px;
}

#feature img {
  width: 75px;
  height: 75px;
}

@media (max-width: 599px) {
  #feature li {
    width: 100%;
  }

  #feature li:nth-of-type(1n+2) {
    margin-top: 20px;
  }
}

/* --------------------
BANNER AREA
-------------------- */

#banner-area .cb {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 56px 0;
}

#banner-area .banner-link:hover {
  opacity: 0.7;
}

@media (max-width: 599px) {
  #banner-area .cb {
    flex-direction: row;
    justify-content: center;
  }

  #banner-area .banner + .banner {
    margin-top: 10px;
  }
}

/* --------------------
Apply
-------------------- */

#apply {
  background: #f80 url("../images/apply_bg.png") no-repeat center;
  background-size: cover;
}

#apply .hl {
  color: #fff;
}

#apply p {
  font-size: 14px;
  text-align: center;
  color: #fff;
}

#apply small {
  display: block;
  margin-top: 8px;
}

#apply .btn {
  border: 0;
  color: #f80;
}

/* --------------------
Information
-------------------- */

.layout_information .news-list {
  display: flex;
  flex-flow: column wrap;
  font-size: 16px;
  margin-top: 14px;
}

.layout_information .news-time {
  margin-bottom: 16px;
}

.layout_information .news-title {
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 40px;
  padding: 0 0 40px;
}

.layout_information .news-title .link {
  color: #426077;
}

.information-nav-items {
  list-style: none;
}

.layout_information .news-title .link[target="_blank"]::after {
  /* 外部リンクアイコン */
  content: "\f08e";
  font-family: FontAwesome;
  margin-left: 3px;
}

/* 機能追加情報 */
.information-addfunction-body {
  margin: 40px auto 0;
}

@media (max-width: 599px) {
  .layout_information .news-title:last-child {
    margin-bottom: 0;
  }

  .information-nav-item {
    border-bottom: 1px solid #e8e8e8;
    padding: 14px 0;
  }
}

@media (min-width: 600px) {
  .layout_information .news-list {
    flex-direction: row;
  }

  .layout_information .news-time {
    border-bottom: 1px solid #e8e8e8;
    box-sizing: border-box;
    margin: 0 0 24px;
    padding: 0 24px 24px;
    width: 160px;
  }

  .layout_information .news-title {
    box-sizing: border-box;
    margin: 0 0 24px;
    padding: 0 24px 24px 0;
    width: calc(100% - 160px);
  }

  .layout_information .news-time:last-of-type,
  .layout_information .news-title:last-of-type {
    margin-bottom: 18px;
  }

  .information-nav-items {
    display: flex;
    flex-wrap: wrap;
    line-height: 1;
  }

  .information-nav-item + .information-nav-item {
    border-left: 1px solid #bdbdbd;
    padding-left: 11px;
    margin-left: 11px;
  }
}

/* ----------------------
  Reccomended Area
-------------------------- */

.recommended-items {
  list-style: none;
}

.recommended-item a {
  color: #426077;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.recommended-item .media {
  min-height: 0%;
  order: -1;
}

.recommended-item .title {
  font-size: 16px;
  line-height: 1.8;
}

.recommended-item a[target="_blank"] .title::after {
  /* 外部リンクアイコン */
  content: "\f08e";
  font-family: FontAwesome;
  margin-left: 3px;
}

.recommended-item a:hover .title {
  text-decoration: underline;
}

.recommended-item a:hover .media {
  opacity: 0.7;
}

.recommended-item .url {
  line-height: 2;
  opacity: 0.5;
  word-break: break-all;
}

.label-unit li {
  border-radius: 3px;
  display: inline-block;
  font-size: 0.8rem;
  margin: 0 4px 10px 0;
  padding: 2px 8px;
}

.label-unit .label-full {
  background: #ff001e;
  color: #fff;
}

.label-unit .label-waitlist {
  background: #fff;
  border: 1px solid #ff001e;
  color: #ff001e;
}

@media (max-width: 599px) {
  .recommended-item + .recommended-item {
    margin-top: 20px;
  }

  .recommended-item .media {
    margin-bottom: 18px;
    width: 100%;
  }

  .recommended-item .media img {
    height: auto;
    width: 100%;
  }
}

@media (min-width: 600px) {
  .recommended-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .recommended-item {
    flex-basis: 460px;
  }

  .recommended-item:nth-child(n+3) {
    margin-top: 40px;
  }

  .recommended-item .media {
    margin-bottom: 14px;
  }
}

/* IE11 hack */
@media all and (-ms-high-contrast: none) and (min-width: 600px) {
  .recommended-item .title {
    width: 100%;
  }

  .label-unit li {
    padding-top: 6px;
  }
}