<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "UTF-8";
/* CSS Document */


/*************************************************************************************************************************
* デフォルト：640px以下用の記述
*************************************************************************************************************************/
main,
main *,
#content,
#content *,
.error_back,
.txt_area{ box-sizing: border-box;}
#topcontrol{ display: none;}

.miniheader{ background: #005bac; position: absolute; box-shadow: none; }
.miniheader .logo{ background: url("/assets/img/common/hd_logo_white.svg")no-repeat center top /contain; height: 26px; margin-left: 10px;}
.miniheader .logo img{ display: none;}
.miniheader a{ display: block; height: 100%; color: white!important;}
.miniheader .miniheader_user{ background: url("/parts/img/cp/top_user.png") no-repeat left 4px /12px; color: white;}
.miniheader .miniheader_user__menu{ top: 46px;}
.miniheader .miniheader_user__menu a{ color: #222!important;}

.minifooter.short{ background: none; width: 100%; height: 50px; position: absolute; bottom: 0; color: #666; font-size: 12px; line-height: 50px;}

@media print, screen and (max-width:800px){
	#content:not(.order_complete):not(.order_sms){ padding-bottom: 170px;}
	.miniheader{ padding-left: 0; padding-right: 0;}

  /* aichat */
  #docsbotai-root{ display: none;}
}
body.minihd{ background: #f2f4f5; min-height: calc(100vh - 130px); padding-bottom: 40px!important; position: relative;}
body.minihd #main{ padding: 0; min-width: auto; width: auto;}


/* tit */
.main_tit{ margin-bottom: 20px; color: white; font-size: 22px; font-weight: bold; text-align: center; letter-spacing: 5px;}
.main_tit span{ display: block; font-size: 12px; font-weight: normal; letter-spacing: 2px;}
.sub_tit{ padding: 0 20px 20px 32px; margin: 0; position: relative; font-size: 15px; text-align: left; letter-spacing: 0; }
.sub_tit i{ position: absolute; top: 1px; left: 0; color: #005bac; font-size: 24px; }
.sub_tit::before{ display: none;}


/* btn_area btn_select */
.btn_select{ display: block; width: 280px; height: 56px; padding-left: 48px; margin: 0 auto; position: relative; line-height: 56px; text-align: left; border: #e5e5e5 1px solid; border-radius: 6px;}
.btn_select.on{ background: #e5eef7; border: #005bac 1px solid; }
.btn_select input{ position: absolute; left: 20px; top: 50%; margin-top:-8px; }
.btn_area{ display: flex;justify-content: space-between; flex-wrap: wrap; margin-top: 10px; }
.btn_area li{ width: 100%; margin-top: 10px;}
.btn_area .btn_select{ width: 100%;}


/* check_box */
.check_box input{ display: none;}
.check_box label{ padding-left: 30px; position: relative; }
.check_box label::before,
.check_box label::after{ content: ""; display: block; position: absolute;}
.check_box label::before{ width: 20px; height: 20px; left: 0; top: -4px; border: #e5e5e5 2px solid; border-radius: 4px;}
.check_box label::after{ display: none; width: 8px; height: 4px; left: 6px; top: 2px; border-bottom: white 2px solid; border-left: white 2px solid; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}

.check_box input[type="checkbox"]:checked+label::before{ background: #005bac; border: #005bac 1px solid;}
.check_box input[type="checkbox"]:checked+label::after{ display: block; }


/* main */
main{ display: block; background: #005bac; width: 100%; padding: 30px 10px 40px; }
.step_list{ display: flex; justify-content: center; background: white; max-width: 770px; margin: 0 auto; overflow: hidden; border-radius: 25px; }
.step_list li{ width: 33.33%; height: 50px; padding-left: 10px; padding-top: 18px; position: relative; color: #999; font-size: 11px; font-weight: bold; line-height: 1.4; text-align: center;}
.step_list li.on{ color: #005bac;}
.step_list li.row02{ padding-top: 10px; }

.step_list li:not(:first-child)::before,
.step_list li:not(:first-child)::after{ content: ""; display: block; width: 0; height: 0; position: absolute; top: 50%; left: 0; border-style: solid; border-width: 30px 0 30px 1em; -webkit-transform: translate(0, -50%);transform: translate(0, -50%);}
.step_list li:not(:first-child)::before{ border-color: transparent transparent transparent #005bac; }
.step_list li:not(:first-child)::after{ border-color: transparent transparent transparent white; left: -1px; }


/* content */
#content{ display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1140px; margin: 0 auto; padding: 40px 10px 60px;}
.white_area{ background: white; padding: 30px 20px 30px; overflow: hidden; border-radius: 8px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);}


/** buy_area **/
.buy_area{ width: 100%;}
.buy_area section:not(:first-of-type){ margin-top: 20px;}
.buy_area input[type="radio"]{ width: 15px; height: 16px; cursor: pointer; }


/* error and success */
.buy_area .input_area .error input,
.order_confirm .input_area .error .select_box{ background: #fce7e7; border: #e61616 2px solid;}
.order_confirm .input_area .error .select_box::before{ background: #fce7e7;}
.buy_area .input_area .success input{ border: #00aca7 2px solid;}

.buy_area .input_area .messageError,
.buy_area .input_area .messageSuccess{ display: none; margin-top: 6px; font-size: 12px;}
.buy_area .input_area .messageError{ color: #e61616; }
.buy_area .input_area .messageSuccess{ color: #00aca7; }
.buy_area .input_area .error .messageError{ display: block;}
.buy_area .input_area .success .messageSuccess{ display: block;}


/* attention */
.buy_area .attList.last{ margin-top: 30px; color: #666; font-size: 12px;}
.buy_area .attList.last a{ color:#005bac; }
.attTxt.att_v1{ display: table; margin: 0 0 0 auto; font-size: 12px; font-weight: bold;}


/* aside */
aside{ width: 100%; }
aside .sub_tit{ margin-left: 0; margin-right: 0; padding: 0 0 16px; border-bottom: #e5e5e5 1px solid;}
aside .sub_tit__tokuten{ display: block; margin-top: 10px; font-size: 12px; color: red;}
aside .sub_tit__tokuten a{ color: red;}
aside .detail{ margin-top: 6px; margin-bottom: 10px; }

aside .detail li{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 14px 0 0; }
aside .detail li .tit{ padding-right: 6px; font-weight: bold; }
aside .detail li .price{ font-size: 16px; font-weight: bold; text-align: right;}
aside .detail li .w100per{ display: flex; justify-content: space-between; align-items: center;}
aside.domain_only .server,
aside.domain_only .campaign{ display: none;}

aside .detail .subtotal{ margin-top: 16px; border-top: #e5e5e5 1px solid;}
aside .detail .remaind{ color:#e61616; }
aside .detail .total{ padding-top: 20px; margin-top: 16px; color: #005bac; font-weight: bold; border-top: #e5e5e5 1px solid; }
aside .detail .total .tit{ font-size: 16px;}
aside .detail .total .price{ font-size: 20px;}
aside .detail_txt{ color: #666; font-size: 12px;}

aside .btn{ width: 100%; height: 56px; padding: 0!important; margin: 40px auto 0; font-size: 14px; line-height: 50px; border-radius: 6px;}
aside .login{ display: table; margin: 20px auto 0; color: #005bac; font-size: 12px; }

@media print, screen and (max-width:800px){
  aside{ position: fixed; left: 0; bottom: 0; z-index: 100000000;}
  aside .white_area{ padding: 0 20px 20px;}
  aside .sub_tit{ padding-top: 22px; }
  aside .sub_tit::before{ background: none; display: block; width: 8px; height: 8px; margin-top: -2px; top: 50%; left: calc(100% - 16px); border-bottom: #666 1px solid; border-right: #666 1px solid; transform: rotate(-135deg); -webkit-transform: rotate(-135deg);}
  aside .sub_tit.on::before{ transform: rotate(45deg); -webkit-transform: rotate(45deg);}

  aside .sp_open{ height: 0; overflow: hidden;}
  aside .detail{ margin-top: 0; }
  aside .btn{ margin-top: 20px;}
  aside .login{ margin-top: 10px;}
}


/* input_area */
.input_area .tit{ display: table; background: white; margin: 26px 0 -12px 10px; padding: 0 6px; position: relative; color: #666; font-size: 12px; z-index: 10;}
.input_area input[type="text"],
.input_area input[type="password"]{ height: 48px; padding: 4px 16px 0; border-radius: 6px;}
.input_area .txt{ display: none; margin: 8px 0 -10px; padding-left: 18px; position: relative; font-size: 12px;}
.input_area .txt::before{ content: ""; display: block; width: 12px; height: 12px; position: absolute; top: 4px; left: 0;}

.input_area .ng input[type="text"],
.input_area .ng input[type="password"]{ border: #e61616 2px solid;}
.input_area .ng #searchNG,
.input_area .ng #searchsvNG{ display: block; color: #e61616;}
.input_area .ng #searchNG::before,
.input_area .ng #searchsvNG::before{ background: url("/parts/img/cp/regdom/ico_ng.svg")no-repeat,center/contain;}

.input_area .ok input[type="text"],
.input_area .ok input[type="password"]{ border: #00aca7 2px solid;}
.input_area .ok #searchOK,
.input_area .ok #searchsvOK{ display: block; color: #00aca7;}
.input_area .ok #searchOK::before,
.input_area .ok #searchsvOK::before{ background: url("/parts/img/cp/neworder/ico_ok.svg")no-repeat,center; background-size: 12px auto!important;}


/* bnr_area */
.bnr_area{ display: block; margin-bottom: 20px; transition: opacity .3s ease-in-out 0s;}
.bnr_area:hover{ opacity: .9;}
.bnr_area img{ width: 100%;}

/* logo_area */
.logo_area{ display: flex; flex-wrap: wrap; align-items: center; margin: 30px 0 26px;}
.logo_area &gt; a{ display: block; max-width: 194px; margin: 0 auto;}
.logo_area &gt; a img{ width: 100%;}
.logo_area &gt; img{  display: block; margin: 0 auto;}
.logo_area span{ width: 100%; display: block; padding-top: 14px; margin-top: 14px; font-size: 13px; text-align: center; border-top: #e5e5e5 1px solid;}


/* catch */
.catch{ display: inline-block; background: none; margin:0 0 0 4px; padding: 0; color: #e61616; font-size: 12px; font-weight: normal; line-height: inherit ;}


/* error login */
.error_back,
.txt_area{ max-width: 1120px; margin: 20px 10px -10px; padding: 20px; font-weight: bold; text-align: center;}
.error_back{ background: #fce7e7; color: #e61616;}
.txt_area{ background: #e7eef6; color: #005bac; }
.txt_area a{color: #005bac;  text-decoration: underline;}

.txt_area.campaign{ background: #fff6ea; margin-bottom: -20px; color: #ff6d06; }
.txt_area.campaign .point{display: table; background: white; padding:3px 10px; margin: 0 auto 8px; font-size: 11px; color: #182f3d; vertical-align: middle; border: #182f3d 1px solid; border-radius: 20px;}
.txt_area.campaign .day{ font-size: 12px;}


/* domain_free */
.domain_free{ background: #e7f4ff; margin: 0 0 10px; padding: 14px; color: #222; border-radius: 6px;}
.domain_free &gt; p span{ display: block; margin-bottom: 2px; font-size: 15px; font-weight: bold; color: #005bac;}
.domain_free .campaign{ background: white; margin-top: 12px; padding: 60px 14px 14px; position: relative; font-weight: bold; line-height: 1.5; border-radius: 6px;}
.domain_free .campaign &gt; span{ position: absolute; top: 12px; left: 50%; -webkit-transform: translate(-50%, 0);transform: translate(-50%, 0);}
.domain_free .campaign &gt; span span{ display: block; background: #005bac; padding: 8px 10px; font-weight: bold; color: white;}
.domain_free .campaign &gt; span span::before { content: ""; display: none; width: 0; height: 0; position: absolute; top: -2px; right: 0; border-style: solid; border-width: 22px 0 22px 10px; border-color: transparent transparent transparent #005bac;}
.domain_free .campaign p span{ color: #e61616; font-size: 16px; }

.domain_free.core_campaign{ background: #fef6d7; color: #666; border: #f7ce19 1px solid; border-radius: 4px;}
.domain_free.core_campaign &gt; p span{ color: #e61616;}
.domain_free.core_campaign .campaign{ background: #005bac; color: white; border-radius: 4px;}
.domain_free.core_campaign .campaign &gt; span{ background: #f7ce19; padding: 8px 10px; font-weight: 700; color: #005bac;}
.domain_free.core_campaign .campaign &gt; span::before { content: ""; display: none; width: 0; height: 0; position: absolute; top: 0; right: -10px; border-style: solid; border-width: 20px 0 20px 10px; border-color: transparent transparent transparent #f7ce19;}
.domain_free.core_campaign .campaign p span{ color: #f7ce19;}


/* server_campaign */
.server_campaign{ background: #e7f4ff; border-radius: 6px; overflow: hidden; }
.server_campaign &gt; p{ background: #005bac; padding: 8px 12px 12px; color: white; font-size: 16px; line-height: 1.4;}
.server_campaign &gt; p &gt; span{ font-weight: bold; }
.server_campaign .off{ color: #f7ce19;}
.server_campaign .off span{ font-size: 24px;}
.server_campaign .detail{ padding: 14px 10px 20px;}
.server_campaign .detail &gt; p{ font-weight: bold; font-size: 15px; color: #005bac; }
.server_campaign .detail ul{ display: flex; justify-content: space-between; margin-top: 10px; flex-wrap: wrap; font-size: 14px;}
.server_campaign .detail li{ background: white; width: 100%; padding: 10px 20px; position: relative; border-radius: 6px;}
.server_campaign .detail li:nth-child(2){ margin-top: 10px;}

.server_campaign .detail li::before{ content: ""; display: block; width: 30px; height: 30px; position: absolute; top: 0; left: 0;}
.server_campaign .detail li:nth-child(1)::before{background: url("/parts/img/cp/neworder/neworder_campaign01.png")no-repeat left top /contain;}
.server_campaign .detail li:nth-child(2)::before{background: url("/parts/img/cp/neworder/neworder_campaign02.png")no-repeat left top /contain;}

.server_campaign .detail li  &gt; span{ display: block; font-weight: bold; color: #e61616; text-align: center;}
.server_campaign .detail li p{ margin-top: 6px; text-align: center;}
.server_campaign .detail p span{ display: block; color: #666666; font-size: 12px;}


/* order_index
**********************************************************************/
/* tld_area */
.tld_area li{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; min-height: 98px; padding: 20px 0; position: relative; text-align: center;}
.tld_area li .tit{ display: block; margin-bottom: 4px; color: #666; font-size: 12px; }
.tld_area input[type="radio"]{ margin-top: -8px; position: absolute; top: 50%; left: 0;}
.tld_area .name{ width: 46%; position: relative; text-align: left;}
.tld_area .whois{ width: 100%; margin: 4px 0 -4px; font-size: 10px; color: #666; }

.tld_area .price{ width: 22%; max-width: 100px; text-align: right;}
.tld_area .price p{ font-weight: bold;}
.tld_area .price .yen{ font-size: 15px;}
.tld_area .price .yen .mark{ font-size: 12px;}
.tld_area .price .price_year{ display: inline-block;}

@media print, screen and (max-width:640px){
  .tld_area li &gt; div{ display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%!important; max-width: none!important; }
  .tld_area input[type="radio"]{ margin-top: 0; top: 48px;}
  .tld_area .name{ padding-bottom: 8px;}
  .tld_area .name label{ width: 100%;}
  .tld_area .year,
  .tld_area .price{ margin-top: 10px;}
}

/* domain */
.buy_area #domain{ padding-bottom: 0;}
.buy_area #domain.no_free .sub_tit{ background: #fff2e5; padding-top: 24px; padding-left: 50px; margin: -30px -20px 0; color: #ff8000;}
.buy_area #domain.no_free .sub_tit i{ top: 24px; left: 18px; color: #ff8000;}
.buy_area #domain:not(.no_free) input[type="radio"]{ display: none;}
.buy_area #domain .camp .tit &gt; span{ position: relative;}
.buy_area #domain .camp .tit span span{ background: #FF3B3B; width: 90px; padding: 4px 6px; position: absolute; top: -4px; left: -100px; font-size: 11px; color: white; line-height: 1; border-radius: 3px;}
.buy_area #domain .camp .yen .mark,
.buy_area #domain .camp .yen .val{ color: #09B8AC;}
.buy_area #domain .camp .yen .mark{ font-size: 14px;}
.buy_area #domain .camp .yen .val{ font-size: 22px; }
@media print, screen and (max-width:640px){
  .buy_area #domain .camp .tit span span{ left: 34px; top: -2px;}
  .buy_area #domain .camp .yen .val{ line-height: 1;}
}

/* replace */
.buy_area #replace .sub_tit i,
.buy_area #server .sub_tit i{ top: 1px; left: -2px; }

.order_index #replace .tld_area{ margin-top: -20px; }
.buy_area #domain.no_free .tld_area li,
.order_index #replace .tld_area li{ padding-left: 24px;}
.order_index #replace .tld_area li{ border-bottom: #e5e5e5 1px solid;}

.order_index #replace .tld_area .name .tit{ font-weight: bold;}
.order_index #replace .free .name .tit{ color: #005bac;}
.order_index #replace .recommend .name .tit{ color: #f7ce19;}
.order_index #replace .soldout .txt{ color: #666;}
.order_index #replace .soldout input[type="radio"]{ cursor: not-allowed; }

/* server */
.order_index .fade_btn { width: 200px; margin: 0 auto 24px; position: relative; }
.order_index .fade_btn ul { display: flex; background: #005bac; border: #005bac 2px solid; border-radius: 100px; }
.order_index .fade_btn li { width: 50%; padding: 6px 0; color: #fff; font-size: 12px; text-align: center; cursor: pointer;}
.order_index .fade_btn li.on { color: #005bac; }

.order_index .fade_btn li span { position: relative; z-index: 2; }
.order_index .fade_btn .hover { background: #fff; width: 50%; height: calc(100% - 4px); position: absolute; top: 2px; left: 2px; border-radius: 100px; -webkit-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; }
.order_index .fade_btn .hover.on{ left: 98px;}

.order_index .sv_campaign{ margin-bottom: 20px; text-align: center;}
.order_index .sv_campaign p{ display: table; margin: 0 auto; position: relative; font-size: 15px; font-weight: bold; }
.order_index .sv_campaign p::before{ content: ""; display: block; background: #fef6d7; width: 100%; height: 10px; position: absolute; bottom: 4px; left: 0;}
.order_index .sv_campaign p .off{ display: inline-block; margin: 0 2px; font-size: 24px; line-height: 1; color: #005bac;}
.order_index .sv_campaign p &gt; span{ position: relative; }
.order_index .sv_campaign .date{ color: #666;}

.order_index .server_select{ padding-top: 30px;}
.order_index .server_select ul{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: -10px;}
.order_index .server_select .v1{ display: none;}
.order_index .server_select.select_c{ direction: rtl; }
.order_index .server_select.select_c ul{ flex-direction: row-reverse;}
.order_index .server_select.select_c &gt; * &gt; *{ direction: ltr; text-align: left; }

.order_index .server_select li{ width: 48.6%; padding: 14px 10px 16px; margin-top: 10px; overflow: hidden; position: relative; border-radius: 6px;}
.order_index .server_select li.on{ background: #e5eef7; }
.order_index .server_select .popular{ margin-top: -18px;}
.order_index .server_select .popular_txt{ display: block; margin: -14px -20px 15px; background: #f7ce19; padding: 4px 0; color: #005bac; font-size: 12px; font-weight: bold; text-align: center; }
.order_index .server_select .popular .price .yen{ color: #005bac;}
.order_index .server_select .popular .free{ background: #f7ce19; border-color: #f7ce19;}
.order_index .server_select .popular input[type="radio"]{ top: 48px;}

.order_index .server_select label{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: #e5e5e5 1px solid; border-radius: 6px;}
.order_index .server_select li.on label{ border: #005bac 2px solid;}
.order_index .server_select input[type="radio"]{ position: absolute; top: 18px; left: 12px; }
.order_index .server_select .tit{ padding-bottom: 12px; margin-bottom: 16px; font-size: 14px; font-weight: bold; text-align: center; border-bottom: #e5e5e5 1px solid;}

.order_index .server_select .price{ font-weight: bold; text-align: center;}
.order_index .server_select .price .off{ display: block; margin: -8px 0 6px; color: #666; font-weight: normal;}
.order_index .server_select .price .off span{ display: inline-block; margin-left: 6px; color: #005bac; font-weight: bold;}

@media screen and (min-width: 800px) and (max-width: 990px) {
  .order_index .server_select .price .off span{ display: none;}
}

.order_index .server_select .yen{ font-size: 24px; line-height: 1;}
.order_index .server_select .yen span{ font-size: 14px;}
.order_index .server_select .free{ display: table; background:white; margin: 6px auto 0; padding: 6px 10px; color: #005bac; font-size: 12px; line-height: 1; border: #005bac 1px solid; border-radius: 20px;}

.order_index .server_select .detail{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 4px; font-size: 12px;}
.order_index .server_select .detail dt{ width: 60%; margin-top: 8px;}
.order_index .server_select .detail dd{ width: 40%; margin-top: 8px; font-weight: bold; text-align: right;}

.order_index .server_select.core .tit{ padding: 4px 0 8px;}
.order_index .server_select.core .tit span{ display: block; font-size: 12px; font-weight: normal; color: #666; line-height: 1;}
.order_index .server_select.core input[type="radio"]{ top: 26px;}
.order_index .server_select.core .popular input[type="radio"]{ top: 54px;}

.order_index #server .account_name &gt; div{ display: flex; flex-wrap: wrap;}
.order_index #server .account_name &gt; div p{ font-weight: bold;}
.order_index #server .account_name input{ width: 100%; margin: 0 10px 6px 0; }
.order_index #server .btn_select{ margin: 26px auto 0; padding-left: 10px; text-align: center;}

.order_index .wordpress{ background: white; display: flex; align-items: center; margin-top: 30px; position: relative; border: #e5e5e5 1px solid; border-radius: 6px; cursor: pointer;}
.order_index .wordpress.on{ background: #eaf5ff;}
.order_index .wordpress.disabled_check{ opacity: 0.6; cursor: default;}

.order_index .wordpress::before{ content: ""; background: #e5e5e5; width: 1px; height: 100%; position: absolute; top: 0; left: 80px;}
.order_index .wordpress .tit{ background: none; min-width: 80px; padding: 12px 0 6px; margin: 0; color: #005bac; font-weight: bold; text-align: center; }
.order_index .wordpress .tit i{ display: block; margin: 0 auto 4px; font-size: 26px; color: #222; line-height: 1;}
.order_index .wordpress &gt; div{ padding: 12px 15px 8px; font-size: 12px;}

.order_index .wordpress .free{ background: white; margin-left: 8px; padding: 3px 10px; font-size: 10px; color: #005bac; line-height: 1; border: #005bac 1px solid; border-radius: 20px;}
.order_index .wordpress .check_box label{ padding-left: 26px; }
.order_index .wordpress .check_box label::before{ background: white; width: 16px; height: 16px; }
.order_index .wordpress .check_box label::after{ top: 1px; left: 4px; }
.order_index .wordpress_txt{ margin-top: 4px; color: #666; }

/* vai */
.order_index .vai_select{ padding-top: 30px;}
.order_index .vai_select ul{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: -10px;}
.order_index .vai_select.select_c{ direction: rtl; }
.order_index .vai_select.select_c ul{ flex-direction: row-reverse;}
.order_index .vai_select.select_c &gt; * &gt; *{ direction: ltr; text-align: left; }

.order_index .vai_select li{ width: 48.6%; padding: 14px 10px 16px; margin-top: 10px; overflow: hidden; position: relative; border-radius: 6px;}
.order_index .vai_select li.on{ background: #e5eef7; }
.order_index .vai_select .popular{ margin-top: -18px;}
.order_index .vai_select .popular_txt{ display: block; margin: -14px -20px 15px; background: #f7ce19; padding: 4px 0; color: #005bac; font-size: 12px; font-weight: bold; text-align: center; }
.order_index .vai_select .popular .price .yen{ color: #005bac;}
.order_index .vai_select .popular .free{ background: #f7ce19; border-color: #f7ce19;}
.order_index .vai_select .popular input[type="radio"]{ top: 48px;}

.order_index .vai_select label{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: #e5e5e5 1px solid; border-radius: 6px;}
.order_index .vai_select li.on label{ border: #005bac 2px solid;}
.order_index .vai_select input[type="radio"]{ position: absolute; top: 18px; left: 12px; }
.order_index .vai_select .tit{ padding-bottom: 12px; margin-bottom: 16px; font-size: 14px; font-weight: bold; text-align: center; border-bottom: #e5e5e5 1px solid;}
.order_index .vai_select .price{ font-weight: bold; text-align: center;}
.order_index .vai_select .price .off{ display: block; margin: -8px 0 6px; color: #666; font-weight: normal;}
.order_index .vai_select .price .off span{ display: inline-block; margin-left: 6px; color: #005bac; font-weight: bold;}

@media screen and (min-width: 800px) and (max-width: 990px) {
	.order_index .vai_select .price .off span{ display: none;}
}

.order_index .vai_select .yen{ font-size: 24px; line-height: 1;}
.order_index .vai_select .yen span{ font-size: 14px;}
.order_index .vai_select .free{ display: table; background:white; margin: 6px auto 0; padding: 6px 10px; color: #005bac; font-size: 12px; line-height: 1; border: #005bac 1px solid; border-radius: 20px;}
.order_index .vai_select .detail{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 4px; font-size: 12px;}
.order_index .vai_select .detail dt{ width: 60%; margin-top: 8px;}
.order_index .vai_select .detail dd{ width: 40%; margin-top: 8px; font-weight: bold; text-align: right;}

.order_index .vai_select.products .tit{ padding: 4px 0 8px;}
.order_index .vai_select.products .tit span{ display: block; font-size: 12px; font-weight: normal; color: #666; line-height: 1;}
.order_index .vai_select.products input[type="radio"]{ top: 26px;}
.order_index .vai_select.products .popular input[type="radio"]{ top: 54px;}

.order_index #vai .account_name &gt; div{ display: flex; flex-wrap: wrap;}
.order_index #vai .account_name &gt; div p{ font-weight: bold;}
.order_index #vai .account_name input{ width: 100%; margin: 0 10px 6px 0; }
.order_index #vai .btn_select{ margin: 26px auto 0; padding-left: 10px; text-align: center;}

/* modal */
#order_modal{ display: none; background: rgba(255,255,255,0.8); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 100000000;}
#order_modal div{ background: white; max-width: 442px; width: calc(100% - 20px); padding: 30px; position: absolute; top: 50%; left: 50%; text-align: center; border-radius: 10px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1); -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
#order_modal .close{ width: 30px; height: 30px; position: absolute; top: 20px; right: 20px;}
#order_modal .modal_tit{ padding-bottom: 24px; margin-bottom: 24px; font-size: 16px; font-weight: bold; border-bottom: #e5e5e5 1px solid;}
#order_modal .btn{ width: 180px; height: 56px; margin: 34px auto 20px; font-size: 14px; font-weight: bold; border-radius: 6px;}
#order_modal a.btn{ padding: 0!important; line-height: 56px;}
#order_modal .small{ color: #666; text-align: left;}

.order_index #order_modal div{ padding: 56px 40px; border: #ff6d06 2px solid; }
.order_index #order_modal dt{ font-weight: bold;}
.order_index #order_modal dd{ margin-top: 8px; color: #ff6d06;}
.order_index #order_modal input[type="submit"]{ background: none; padding: 0; font-size: 12px; color: #005bac;}

/*** server_regist ***/
.server_regist #domain{ padding-bottom: 30px!important;}
.server_regist #domain input[type=radio]{ display: block!important; }
.server_regist #domain .search_area{ display: flex; justify-content: space-between; height: 48px; border: #e5e5e5 1px solid; border-radius: 4px;}
.server_regist #domain .search_area span{ width: 70px; height: 100%; padding:10px 0 0 12px; font-size: 14px; color: #666; }
.server_regist #domain .search_area input[type=text]{ border: none; height: 100%; border-left: #e5e5e5 1px solid; border-radius: 0;}
.server_regist #domain .search_area input[type=submit]{ background: url(/assets/img/common/ico_search_white.svg) no-repeat center/16px; background-color: #005bac;  height: 100%; width: 48px; overflow: hidden; text-indent: 200%; white-space: nowrap; cursor: pointer; border-radius: 0 4px 4px 0;}

.server_regist #server .logo_area{ margin-top: 10px;}
.server_regist .result_area{ max-height: 340px; margin-top: 30px; overflow-y: scroll; border-bottom: #e5e5e5 1px solid;}
.server_regist .result_area li{ position: relative; }
.server_regist .result_area li:not(:first-child){ border-top: #e5e5e5 1px solid;}
.server_regist .result_area li.on label{ background: #e5eef7; border: #005bac 1px solid; border-radius: 4px; }
.server_regist .result_area input[type=radio]{ position: absolute; left: 20px; top: 50%; -webkit-transform: translate(0, -50%);transform: translate(0, -50%);}
.server_regist .result_area label{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 16px 20px 16px 56px; border: white 1px solid;}

.server_regist .result_area .tld{ display: flex; align-items: center; padding-right: 70px; position: relative;}
.server_regist .result_area .tld p{ font-weight: bold;}
.server_regist .result_area .free{ display: inline-block; background: #00aca7; padding: 5px 8px; position: absolute; top: 2px; right: 0; font-size: 10px; color: white; line-height: 1; border-radius: 10px;}
.server_regist .result_area .price,
.server_regist .result_area .price_NG{ width: 100%; margin-top: 4px; font-weight: bold;}
.server_regist .result_area .price_NG{ display: none; color: #666; font-weight: normal; }

.server_regist .result_area .price_LOADING { display: none; position: relative; width: 24px; height: 24px; }
.server_regist .result_area .price_LOADING span{ display: block; width: 100%; height: 100%; border: 3px solid transparent; border-top: 3px solid #005bac; border-radius: 50%; animation: spin 1s linear 0s infinite; }
.server_regist .result_area .price_LOADING::before{ content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 3px solid #ccdeee; border-radius: 50%; box-sizing: border-box;}

@keyframes spin {
from {
  transform: rotate(0);
  }
to{
  transform: rotate(359deg);
  }
}
.server_regist .result_area li.ng label{ cursor: default;}
.server_regist .result_area li.ng .price{ display: none;}
.server_regist .result_area li.ng .price_NG{ display: block;}
.server_regist .result_area .yen{ font-size: 16px;}
.server_regist .result_area .mark{ font-size: 12px;}
.server_regist .result_area .price_year{ font-size: 14px;}

/*** dom_regist ***/
.dom_regist #server .sub_tit{ font-size: 16px; color: #005BAC;}
.dom_regist .server_select__dom{ margin: -10px 0 0;}
.dom_regist .server_select__dom .btn_select{ width: 100%; height: auto; padding:14px 20px 14px 46px!important; margin-top: 18px!important; line-height: 1.6; text-align: left!important; border: 1px solid #345BA8; border-radius: 4px; }
.dom_regist .server_select__dom input[type=radio]{ margin-top: 0; top: 17px; }
.dom_regist .server_select__dom span{ display: block;}
.dom_regist .server_select__dom .tit{ font-size: 15px; font-weight: bold;}
.dom_regist .server_select__dom .tokuten{ margin: 12px 0 6px; font-size: 13px; font-weight: bold;}
.dom_regist .server_select__dom .tokuten &gt; span{ padding-left: 46px; margin-top: 8px; position: relative;}
.dom_regist .server_select__dom .tokuten .num{ background: #09B8AC; padding: 2px 8px; position: absolute; top: 1px; left: 0; font-size: 9px; color: white; border-radius: 3px;}
.dom_regist .server_select__dom .tokuten .blue{ display: inline;}
.dom_regist .server_select__dom a{ display: inline-block; margin-left: 2px; padding-right: 18px; font-size: 10px; font-weight: normal; text-decoration: none;}
.dom_regist .server_select__dom .tokuten_modal{ background: url("/parts/img/cp/neworder/ico_modal.png")no-repeat right 3px /12px auto; }
.dom_regist .server_select__dom .tokuten_blank{ background: url("/parts/img/cp/neworder/ico_blank.png")no-repeat right center /12px auto;}
.dom_regist .server_select__dom a:hover span{ text-decoration: underline; }
.dom_regist .server_select__dom .on .btn_select{ background: #EDF5FF; border: 1px solid #345BA8!important;}
.dom_regist .server_select__dom .on .tit{ color: #005BAC; }

.dom_regist .server_select__dom.last{ margin: 30px 0 20px;}
.dom_regist .server_select__dom.last .tit{ font-size: 14px; font-weight: normal;}
.dom_regist .server_select__dom.last input[type=radio]{ top: 14px;}
.dom_regist .server_select__dom.last .btn_select{ border: #e5e5e5 1px solid;}

.dom_regist .modal{ display: none; background: rgba(255,255,255,0.8); width: 100%; height: 100%; padding:20px; position: fixed; top: 0; left: 0; overflow-y: scroll; z-index: 1000000000;}
.dom_regist .modal-area{ max-width: 1100px; margin: 20px auto 0; padding: 30px 20px; position: relative; color: white; border-radius: 4px; }
.dom_regist .modal-area .close{ position: absolute; top: 12px; right: 20px; color: white; font-size: 40px; line-height: 1; text-decoration: none;}

.dom_regist #tokuten_dom{ display: none; background: #005BAC; text-align: center;}
.dom_regist #tokuten_dom .tit{ font-size: 18px; font-weight: bold;}
.dom_regist #tokuten_dom .txt{ margin: 12px 0 20px;}
.dom_regist #tokuten_dom .detail{ background: white; max-width: 890px; margin: 0 auto; padding: 20px ; font-weight: bold; border-radius: 4px;}
.dom_regist #tokuten_dom .detail__tit{ font-size: 15px; color: #005BAC;}
.dom_regist #tokuten_dom .detail ul{ display: flex; justify-content: space-between; max-width: 400px; margin: 16px auto 0; font-size: 12px; color: #222;}
.dom_regist #tokuten_dom .detail li{ width: 47%; max-width: 230px; padding-top: 70px; line-height: 1.5;}
.dom_regist #tokuten_dom .detail li:nth-child(1){ background: url("/parts/img/cp/neworder/index_domfree01.png")no-repeat center top /94px auto; }
.dom_regist #tokuten_dom .detail li:nth-child(2){ background: url("/parts/img/cp/neworder/index_domfree02.png")no-repeat center top /94px auto; }
.dom_regist #tokuten_dom .type{ margin: 20px 0 16px; font-size: 15px; font-weight: bold;}
.dom_regist #tokuten_dom .type span{ display: block; margin-bottom: 4px; font-size: 16px;}
.dom_regist #tokuten_dom .dotList{ max-width: 890px; margin: 0 auto; font-size: 12px;}

.dom_regist #tokuten_core{ background: #000; padding: 40px 20px 30px; border: 1px solid #EC4C13 }
.dom_regist #tokuten_core::before,
.dom_regist #tokuten_core::after{ content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.dom_regist #tokuten_core::before{ background: url("/parts/img/cp/neworder/index_coreserver_img.jpg")no-repeat left bottom /506px auto; }
.dom_regist #tokuten_core::after{ background: rgba(0, 0, 0, 0.6); }

.dom_regist #tokuten_core .close{ z-index: 2;}
.dom_regist #tokuten_core .detail{ display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; z-index: 2;}
.dom_regist #tokuten_core .txt{ width: 100%;}
.dom_regist #tokuten_core .tit{ font-size: 18px; font-weight: bold; text-align: center;}
.dom_regist #tokuten_core .tit span{ display: block; margin-top: 4px; font-size: 26px; background: #ff4000; background: -moz-linear-gradient(left, #ff900d 0%, #ff4000 63%, #ff4000 63%, #ff4000 93%); background: -webkit-linear-gradient(left, #ff900d 0%,#ff4000 63%,#ff4000 63%,#ff4000 93%); background: linear-gradient(to right, #ff900d 0%,#ff4000 63%,#ff4000 63%,#ff4000 93%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1;}
.dom_regist #tokuten_core .attList{ margin-top: 20px; font-size: 12px;}
.dom_regist #tokuten_core img{ display: block; width: auto; height: 30px; margin: 20px auto 14px;}

.dom_regist #tokuten_core .plan{ display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%;}
.dom_regist #tokuten_core .plan &gt; li{ background: rgba(0, 0, 0, 0.6); width: 100%; margin-top: 16px; padding-top:14px; border: 1px solid #EC4C13; border-radius: 4px;}
.dom_regist #tokuten_core .name{ font-size: 16px; font-weight: bold; text-align: center;}
.dom_regist #tokuten_core .price{ padding-bottom: 12px; color: #EC4C13; font-size: 18px; font-weight: bold; line-height: 1; text-align: center; border-bottom:1px solid #FF3B3B;}
.dom_regist #tokuten_core .price s{ display:table; margin:-4px auto 4px; font-size:16px; font-weight: normal; }
.dom_regist #tokuten_core .price span{ font-size: 30px;}
.dom_regist #tokuten_core .plan_detail{ padding: 20px; font-size: 12px;}
.dom_regist #tokuten_core .spec{ margin-top: 20px; }
.dom_regist #tokuten_core .spec li{ margin-top: 10px; position: relative;}
.dom_regist #tokuten_core .spec span{ position: absolute; top: 0; right: 0; font-weight: bold;}

/* vai_set */
#vai_set .logo_area span{ font-size: 13px!important;}
#vai_set .btn_area span{ display: inline-block; background: #f7ce19; padding: 8px 10px; color: #005bac; font-size: 13px; line-height: 1; border-radius: 20px;}
#vai_set .btn_area label{ padding-left: 10px; text-align: center;}


/* order_confirm
**********************************************************************/
/* user */
.order_confirm .fade_btn{ display: flex; justify-content: flex-end; align-items: center; margin-bottom: -28px; position: relative; z-index: 3; }
.order_confirm .fade_btn li{ background: #f6f6f6; padding: 4px 8px; margin-left: 6px; font-size: 10px; font-weight: bold; color: #aaa; border-radius: 20px; border: #e5e5e5 1px solid; cursor:pointer;}
.order_confirm .fade_btn .on{ background: #005bac; color: white; border-color: #005bac; }

.order_confirm .input_area{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.order_confirm .input_area li{ width: 48.5%;}
@media print, screen and (max-width:640px){
  .order_confirm .input_area li{ width: 100%;}
  .order_confirm .input_area .none{ display: none;}
}

.order_confirm .input_area .corp{ display: none;}
.order_confirm .input_area .pass .tit{ background: none; width: calc(100% - 10px); padding: 0;}
.order_confirm .input_area .pass .tit &gt; span{ background: white; padding:0 6px; position: relative;}
.order_confirm .input_area .pass .tit a{ display: block; position: absolute; bottom: -30px; right: 14px; font-size: 18px; color: #666; text-decoration: none;}
.order_confirm .input_area .pass .tit a.on{ right: 13px; }

.order_confirm .input_area .col02{ display: flex; justify-content: space-between; }
.order_confirm .input_area .col02 &gt; div{ width: 48.5%; }
.order_confirm .input_area .col02 input{ margin-right: 0;}
.order_confirm .select_box{ margin-top: 0; width: 100%; font-weight: normal; }
.order_confirm .select_box select{ font-weight: normal; }

/* login */
.order_confirm #login .input_area{ margin-top: -16px;}
.order_confirm #login .sub_tit{ padding-bottom: 0;}
.order_confirm .login_forgot{ display: table; margin-top: 16px; color: #005bac; font-size: 12px; text-decoration: none;}
.order_confirm .login_other{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 18px; padding-top: 20px; border-top: #e5e5e5 1px solid;}
.order_confirm .login_other li{ width: 100%; height: 50px; font-size: 12px; font-weight: bold; line-height: 50px; text-align: center; }
.order_confirm .login_other li:not(:first-child){ margin-top: 10px;}

.order_confirm .login_other .gmoid a,
.order_confirm .login_other #AmazonPayButton::before,
.order_confirm .login_other .yahoo_btn{ display: block; padding-left: 20px; text-decoration: none; border-radius: 6px;}

.order_confirm .login_other .gmoid a{ background: url("/parts/img/cp/neworder/confirm_other_gmoid.svg")no-repeat 16px center /28px auto; color: #005bac; border: #005bac 1px solid; }
.order_confirm .login_other .amazon img{ width: 100%; height: 50px; max-height: none!important; position: relative; opacity: 0; z-index: 2;}
.order_confirm .login_other #AmazonPayButton{ position: relative;}
.order_confirm .login_other #AmazonPayButton::before{ content: "Amazonでログイン"; background: url("/parts/img/cp/neworder/confirm_other_amazon.svg")no-repeat 18px center /25px auto; color: #ff9900; border: #ff9900 1px solid; width: 100%; height: 100%; position: absolute; top: 0; left: 0; font-size: 12px; font-weight: bold; line-height: 50px; text-align: center; box-sizing: border-box;}

.order_confirm .login_other .yahoo{ position: relative;}
.order_confirm .login_other .yahoo_btn{ background: url("/parts/img/cp/neworder/confirm_other_yahoo.svg")no-repeat 16px center /30px auto; color: #ff0023; border: #ff0023 1px solid; width: 100%; height: 100%; position: absolute; top: 0; left: 0; font-size: 12px; font-weight: bold; line-height: 50px; text-align: center; }
.order_confirm .login_other .yconnectLogin{ opacity: 0.001;}
.order_confirm .login_other .yahoo iframe{ width: 100%!important; height: 100%!important; position: relative; z-index: 2;}

@media screen and (min-width: 800px) and (max-width: 980px) {
  .order_confirm .login_other .gmoid a,
  .order_confirm .login_other #AmazonPayButton::before,
  .order_confirm .login_other .yahoo_btn{ background-position: 8px center!important; padding-left: 30px;}
}

/* signup */
.order_confirm #signup{ display: none; }
.order_confirm .usage{ background: #fafdff; padding: 20px; border: #e5e5e5 1px solid; border-radius: 8px;}
.order_confirm .usage p{ font-weight: bold; text-align: center;}
.order_confirm .usage .btn_area{ max-width: 380px; margin: 0 auto;}
.order_confirm .usage .btn_area li{ width: 47%;}
.order_confirm .usage .btn_area .btn_select{ background: white; height: 50px; line-height: 50px;}
.order_confirm .usage .btn_area .btn_select.on{ background: #fafdff; margin: -1px; border-width: 2px;}

/* payment */
.order_confirm #payment .sub_tit img{ display: inline-block; width: auto; height: 24px; margin-left: 10px;}
.order_confirm #payment .txt{ margin: 20px 0 26px;}
.order_confirm #payment .detail{ display: flex; align-items: center;}
.order_confirm #payment .detail p{ font-size: 12px; font-weight: bold;}
.order_confirm #payment .btn{ width: 165px; height: 38px; margin-left: 10px; font-size: 12px;}
.order_confirm #payment .btn::before{ top: 15px; right: 10px;}

.order_confirm #payment .card_complete{ display: block;}
.order_confirm #payment .card_complete p{ background: url("/parts/img/cp/regdom/ico_ok.svg")no-repeat left center /16px; padding-left: 28px; font-size: 14px;}


/* order_complete
**********************************************************************/
.order_complete .buy_area,
.order_sms .buy_area{ max-width:800px; width: 100%; margin: 0 auto; }
.order_complete .white_area{ padding: 30px 20px; overflow: visible;}

/* thanks */
.order_complete #thanks .comp_tit{ background: url("/parts/img/cp/neworder/complete_thanks.svg")no-repeat center top/40px; padding-top: 50px; margin-bottom: 22px; font-size: 16px; font-weight: bold; text-align: center;}
.order_complete #thanks .comp_tit.error{ background: url("/parts/img/cp/neworder/complete_error.svg")no-repeat center top/40px;}

/* server */
.order_complete #server{ margin-top: 90px; position: relative;}
.order_complete #server::before{ content:""; display: block; margin-left: -30px; position: absolute; left: 50%; top: -55px; border-top: 30px solid #e5e5e5; border-right: 30px solid transparent; border-left: 30px solid transparent;}
.order_complete #server dl{ color: #005bac; font-weight: bold; border-bottom: #e5e5e5 2px dashed; text-align: center;}
.order_complete #server dt{ font-size: 20px; line-height: 1.5;}
.order_complete #server dd{ margin: 20px 0; font-size: 16px;}

.order_complete #server .dotList{ margin-bottom: 34px;}
.order_complete #server .input_area .tit,
.order_complete #server .input_area .detail{ width: 100%;}
.order_complete #server .input_area .tit{ margin: 0 0 16px;}

.order_complete .btn{ width: 260px; height: 56px; padding: 0!important; font-size: 14px; font-weight: bold; line-height: 56px; border-radius: 6px;}
.order_complete #server .btn{ margin: 40px auto 0;}
.order_complete .pay_case{ margin-top: 20px;}
.order_complete .pay_case dl{ margin:-4px 0 24px; text-align: center; border-bottom: #e5e5e5 1px solid;}
.order_complete .pay_case dt{ color: #005bac; font-size: 16px; font-weight: bold;}
.order_complete .pay_case dd{ margin: 8px 0 18px;}
.order_complete .pay_case .txt{ margin-bottom: 14px;}

.order_complete .pay_list{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: -20px;}
.order_complete .pay_list &gt; li{ width: 100%; margin-top: 20px; overflow: hidden; border: #e5e5e5 1px solid; border-radius: 6px; }
.order_complete .pay_list .tit{ background: #e7f4ff; padding: 8px 14px; font-weight: bold; border-bottom: #e5e5e5 1px solid;}
.order_complete .pay_list .detail{ padding: 20px 14px;}
.order_complete .pay_list .detail li{ display: flex; align-items: center;}
.order_complete .pay_list .detail li:not(:first-child){ margin-top: 10px;}
.order_complete .pay_list .detail span{ background: #e7f4ff; width: 80px; padding: 4px 10px; margin-right: 14px; font-size: 10px; text-align: center;}
.order_complete .pay_list .detail p{ font-weight: bold;}
.order_complete .pay_list .detail .price p{ font-size: 18px; line-height: 1;}

.order_complete .method .txt{ margin: 26px 0 12px; font-weight: bold; }
.order_complete .method .attTxt{ color: #666; font-weight: normal!important;}

/* webcreate */
.order_complete #webcreate{ margin-bottom: 90px; position: relative;}
.order_complete #webcreate::before{ content:""; display: block; margin-left: -30px; position: absolute; left: 50%; bottom: -60px; border-bottom: 30px solid #e5e5e5; border-right: 30px solid transparent; border-left: 30px solid transparent;}
.order_complete #webcreate .logo_area &gt; a{ width: 100%; max-width: 350px; }

/* btn_area */
.order_complete .btn_area{ justify-content: center; margin: 50px auto -10px;}
.order_complete .btn_area li{ width: auto; margin: 0 10px 10px;}
.order_complete .btn_area .whiteBtn{ color: #005bac!important; border: #005bac 1px solid; }

.complete_bnr{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 60px; overflow: hidden; border:#e5e5e5 1px solid; border-radius: 4px; text-decoration: none; }
.complete_bnr img{ width: 100%;}
.complete_bnr .detail{ background: white; width: 100%; padding: 20px 10px;}
.complete_bnr .tit{ margin-bottom: 6px; font-size: 15px; font-weight: bold;}
.complete_bnr .txt{ font-size: 12px; color: #666;}
.complete_bnr .txt .campaign{ display: block; padding: 0 20px; margin-top: 16px; position: relative; color: #005bac; font-size: 14px; font-weight: bold; text-align: center; border: #005bac 1px solid; border-radius: 50px; transition: background 0.3s ease-in-out 0s,color 0.3s ease-in-out 0s;}
.complete_bnr .txt .campaign::before{ content: ""; display: block; width: 5px; height: 5px; margin-top: -5px; position: absolute; right: 20px; top: 50%; border: 3px solid; border-color: #005bac #005bac transparent transparent; transform: rotate(45deg); transition: border 0.3s ease-in-out 0s; }
.complete_bnr .txt .campaign span{ font-size: 18px;}

.complete_bnr.nft_area{ margin-top: 24px!important;}
.complete_bnr.aiwirter_area .tit{ margin-bottom: 8px; font-size: 15px; line-height: 1.5;}
.complete_bnr.aiwirter_area .txt{ line-height: 1.5; }
.complete_bnr.aiwirter_area .txt .attTxt{ margin-top: 6px; font-size: 10px;}


/* order_sms
**********************************************************************/
.txt_area.sms{ max-width: 800px;}
.order_sms .sub_tit{ padding-top: 6px; text-align: center;}
.order_sms .sms_txt{ font-weight: bold; text-align: center;}
.order_sms .sms_txt span{ display: table; margin: 10px auto 0; font-size: 12px; font-weight: normal;}
.order_sms .input_area{ display: table; margin: 0 auto;}
.order_sms .input_area input{ width: 260px; max-width: 300px;}
.order_sms .input_area li &gt; div{ display: flex;}
.order_sms .input_area .btn{ min-width: 100px; margin-left: 10px; font-size: 12px;}

.order_sms .sms_code,
.order_sms .sms_change{ max-width: 360px; margin: 0 auto;}
.order_sms .sms_code &gt; div{ display: flex; justify-content: space-between; margin: 26px 0 36px;}
.order_sms .sms_code input[type=text]{ width: 14%; height: 64px; font-size: 18px; text-align: center;}
.order_sms .sms_code .btn{ width: 100%; height: 56px; margin-left: 0; font-size: 14px; border-radius: 6px;}
.order_sms .sms_code #send_sms_auth_phone{ display: block; background: none; margin: 26px auto 34px; padding: 0; color: #005bac; border: none;}
.order_sms .sms_code #send_sms_auth_phone:hover{ text-decoration: underline;}

.order_sms .sms_change{ background: #f9fdff; padding: 24px 20px 30px; margin-bottom: 10px; border: #e5e5e5 1px solid; border-radius: 6px;}
.order_sms .sms_change .change_tit{ color: #666; text-align: center; }
.order_sms .sms_change .input_area{ width: 100%;}
.order_sms .sms_change .input_area .tit{ margin-top: 14px;}
.order_sms .sms_change .input_area input[type="text"]{ background: white; width: 72%; margin-right: 0;}
.order_sms .sms_change .input_area .btn{ width: 25%; min-width: auto; font-size: 14px; border-radius: 6px;}


/* order_payment
**********************************************************************/
.order_payment .balance{ margin-bottom: 26px;}
.order_payment .balance_area{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 22px 15px 20px; border: #e5e5e5 1px solid; border-radius: 6px;}
.order_payment .balance_area .tit{ width: 100%; font-weight: bold;}
.order_payment .balance_area .price{ display: flex; flex-wrap: wrap; margin: 8px 0 0 auto;}
.order_payment .balance_area .price &gt; span{ font-size: 16px; font-weight: bold; color: #005bac; line-height: 1;}
.order_payment .balance_area .price &gt; span span{ font-size: 24px;}

.order_payment .balance_area .charge{ color: #666;}
.order_payment .balance_area .charge &gt; span{ font-size: 12px; font-weight: bold;color: #222;}
.order_payment .balance_area .charge &gt; span span{ font-size: 16px;}
.order_payment .info{ margin-top: 10px; color: #666;}

.order_payment .shortage .shortage_tit{ margin-bottom: 8px; font-weight: bold;}
.order_payment .shortage.none{ opacity: 0.5;}
.order_payment .shortage.none .shortage_tit{ display: none;}
.order_payment .shortage.none .pay_select label{ cursor: not-allowed; }

.order_payment .pay_select{ display: flex; flex-wrap: wrap; margin-left: -10px;}
.order_payment .pay_select &gt; li{ width: 48.5%; height: 64px; margin-top: 10px; margin-left: 1.5%; position: relative; border: #e5e5e5 1px solid; border-radius: 6px;}
.order_payment .pay_select &gt; li input[type=radio]{ position: absolute; top: 50%; left: 16px; -webkit-transform: translate(0, -50%);transform: translate(0, -50%);}
.order_payment .pay_select label{ display: block; width: calc(100% + 2px); height: calc(100% + 2px); padding: 18px 20px 0 48px;}
.order_payment .pay_select img{ display: block;}
.order_payment .pay_select &gt; li.on{ background: #e5eef7;}
.order_payment .pay_select &gt; li.on label{ margin: -2px; border: #005bac 2px solid; border-radius: 6px; }

.order_payment .pay_select .card label{ padding-top: 10px; }
.order_payment .pay_select .card_list{ display: flex; margin-top: 2px;}
.order_payment .pay_select .card_list &gt; li{ width: 24px; }
.order_payment .pay_select .card_list &gt; li:not(:first-child){ margin-left: 2px;}
.order_payment .pay_select .amazon img{ width: auto; height: 34px;}
.order_payment .pay_select .yahoo img{ width: auto; height: 30px;}
.order_payment .pay_select .webmoney img{ width: auto; height: 33px; margin-top: -4px;}

.order_payment .pay_detail &gt; div{ display: none; margin-top: 30px;}
.order_payment .pay_detail .tit{ margin-bottom: 10px; font-weight: bold;}
.order_payment .pay_detail .card &gt; div{ display: flex; justify-content: space-between; flex-wrap: wrap; padding: 16px 20px; border: #e5e5e5 1px solid; border-radius: 6px; }
.order_payment .pay_detail .card &gt; div p{ display: flex; align-items: center; }
.order_payment .pay_detail .card &gt; div p span{ font-size: 12px; color: #666;}
.order_payment .pay_detail .card &gt; div img{ display: block; width: auto; height: 25px; margin-right: 16px;}
.order_payment .pay_detail .card &gt; div .btn{ background: white!important; width: 100%; min-width: auto; height: 40px; padding: 0 10px!important; margin-top: 14px; color: #005bac!important; font-size: 12px; line-height: 40px; border: #005bac 1px solid; border-radius: 6px;}

.order_payment .pay_detail .att_area{ background: #fef6d7; padding: 14px 14px 14px 44px; margin-bottom: 16px; position: relative; border: #f7ce19 1px solid; border-radius: 4px; }
.order_payment .pay_detail .att_area i{ position: absolute; top: 15px; left: 16px; font-size: 20px; color: #f7ce19;}
.order_payment .pay_detail .attList{ font-size: 12px; color: #666; }
.order_payment .pay_detail .attList a{ color: #666;}
.order_payment .txt-check{ margin-top: 20px; color: #666; }
.order_payment .txt-check a{ color: #005bac;}

@media print, screen and (max-width:500px){
  .order_payment .balance_area .price &gt; span{ width: 100%; text-align: right;}
  .order_payment .balance_area .charge{ margin: 0 0 0 auto;}
  .order_payment .pay_select &gt; li{ width: 100%;}
}


/* order_payment_amazon
**********************************************************************/
.order_payment_amazon #pay .txt{ margin: -4px 0 16px; }
.order_payment_amazon #walletWidgetDiv{ height:320px; }
.order_payment_amazon .back_link{ display: table; position: relative; padding-left: 14px; margin: 30px auto 0; font-size: 12px; color: #666; text-decoration: none;}
.order_payment_amazon .back_link:hover{ text-decoration: underline;}
.order_payment_amazon .back_link::before{ content: ""; display: block; width: 4px; height: 4px; position: absolute; top: 6px; left: 0; border: 2px solid; border-color:  transparent transparent #666 #666; -webkit-transform: rotate(45deg); transform: rotate(45deg); }


/*************************************************************************************************************************
* 641px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:641px){
  .buy_area #domain{ padding-bottom: 0;}

  /* main */
  .step_list li.row02{ padding-top: 18px; }

  /* server */
  .order_complete #server dt{ background: linear-gradient(transparent 60%, #f7ce19 40%);}
  .order_complete #server .input_area .tit{ width: 36%; margin: 0;}
  .order_complete #server .input_area .detail{ width: 64%;}

  .complete_bnr{ margin-top: 100px; }
  .complete_bnr img{ width: 37.5%;}
  .complete_bnr .detail{ width: 62.5%; padding: 20px 40px;}
  .complete_bnr .tit{ font-size: 16px; }
  .complete_bnr .txt .campaign{ font-size: 15px; }
  .complete_bnr .txt .campaign span{ font-size: 20px;}

  .complete_bnr:hover .txt .campaign{ background: #005bac; color: white;}
  .complete_bnr:hover .txt .campaign::before{ border-color: white white transparent transparent;}

  /* server_campaign */
  .server_campaign &gt; p{ padding: 8px 16px 10px;}
  .server_campaign .detail{ padding: 10px 20px 20px;}
  .server_campaign .detail &gt; p{ font-size: 16px; }
  .server_campaign .detail li{ width: 49%; }
  .server_campaign .detail li:nth-child(2){ margin-top: 0;}
  .server_campaign .detail p{ text-align: left;}
}

@media print, screen and (min-width:769px){
  .miniheader{ padding-left: 10px; padding-right: 10px;}
  .miniheader .logo{ margin-left: 0;}
}


/*************************************************************************************************************************
* 800px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:800px){

  /* tit */
  .main_tit{ margin-bottom: 28px; font-size: 28px; }
  .main_tit span{ font-size: 14px; }
  .sub_tit{ padding-bottom: 24px; font-size: 16px;}

  /* btn_area btn_select */
  .btn_area li{ width: 48.5%;}

  /* main */
  main{ padding-bottom: 60px; }
  .step_list li{ font-size: 12px;}

  /* content */
  #content{ padding-bottom: 100px;}
  .white_area{ padding: 30px;}

  /* buy_area */
  .buy_area{ width: 68%;}

  /* catch */
  .catch{ margin-top: 2px; }

  /* aside */
  aside{ width: 30%; }
  aside .white_area{ position: sticky; position: -webkit-sticky; top: 40px;}
  aside .sp_open{ height: auto!important;}

  /* txt_area */
  .txt_area.campaign .point{ display: inline-block; margin: 0 8px 0 0; }
  .txt_area.campaign .day{ font-size: 13px;}

  /* server logo */
  .logo_area{ flex-wrap: nowrap;}
  .logo_area &gt; a{ width: 28%; transition: opacity 0.3s ease-in-out 0s;}
  .logo_area &gt; a:hover{ opacity: .8;}
  .logo_area span{ width: 70%; padding:0 0 0 8px; margin:0 0 0 10px; font-size: 14px; text-align: left; border-left: #e5e5e5 1px solid; border-top:none;}

  /* domain_free */
  .domain_free{ padding: 14px 20px 20px; }
  .domain_free &gt; p span{ font-size: 16px; }
  .domain_free .campaign{ padding: 14px 14px 14px 122px; font-weight: bold; line-height: 1.5; border-radius: 4px;}
  .domain_free .campaign &gt; span{ padding-right: 10px; overflow: hidden; top: 50%; left: 14px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%);}
  .domain_free .campaign &gt; span span{ padding: 10px; }
  .domain_free .campaign &gt; span span::before { display: block; }
  .domain_free .campaign p span{ font-size: 18px; }

  .domain_free.core_campaign .campaign &gt;span{ padding: 10px; overflow: visible; }
  .domain_free.core_campaign .campaign &gt;span::before{ display: block;}


  /* order_index
  **********************************************************************/
  .buy_area #domain.no_free .sub_tit{ margin-left: -30px; margin-right: -30px; padding-left: 60px;}
  .buy_area #domain.no_free .sub_tit i{ left: 26px;}

  /* tld_area */
  .tld_area .price .yen{ font-size: 16px; line-height: 1;}

  /* replace */
  .buy_area #domain.no_free .tld_area li,
  .order_index #replace .tld_area li{ padding-left: 36px;}

  /* server */
  .order_index .server_select ul{ flex-wrap: nowrap; margin-top: 0;}
  .order_index .server_select li{ width: 31.4%; margin-top: 0;}
  .order_index .server_select .popular{ margin-top: -28px;}

  .order_index .server_select{ overflow-x: scroll;}
  .order_index .server_select .v1{ min-width: 140%; }
  .order_index .server_select .v1 li{ width: 24%; }
  .order_index .server_select .yen{ font-size: 28px;}
  .order_index #server .account_name input{ max-width: 360px; margin: 0 10px 0 0; }

  .order_index .wordpress::before{ left: 96px;}
  .order_index .wordpress .tit{ min-width: 96px; padding: 12px 10px 6px; }
  .order_index .wordpress .tit i{ font-size: 30px;}

  .order_index .vai_select ul{ flex-wrap: nowrap; margin-top: 0;}
  .order_index .vai_select li{ width: 31.4%; margin-top: 0;}
  .order_index .vai_select .popular{ margin-top: -28px;}

  .order_index .vai_select{ overflow-x: scroll;}
  .order_index .vai_select .v1{ min-width: 140%; }
  .order_index .vai_select .v1 li{ width: 24%; }
  .order_index .vai_select .yen{ font-size: 28px;}
  .order_index #vai .account_name input{ max-width: 360px; margin: 0 10px 0 0; }

	/* server_regist */
  .server_regist #domain .search_area span{ font-size: 16px; }
  .server_regist .result_area .price,
  .server_regist .result_area .price_NG{ width: auto; margin-top: 0; }

  /* dom_regist */
  .dom_regist #server .sub_tit{ font-size: 18px; }
  .dom_regist #server .sub_tit i{ top: 3px;}
  .dom_regist .modal-area{ margin: 40px auto 0; padding: 30px 30px 40px; }
  .dom_regist .modal-area .close{ top: 16px; right: 30px; font-size: 56px; }

  .dom_regist #tokuten_dom .tit{ font-size: 24px; }
  .dom_regist #tokuten_dom .txt{ margin: 8px 0 26px;}
  .dom_regist #tokuten_dom .detail{ padding: 24px 20px;}
  .dom_regist #tokuten_dom .detail__tit{ font-size: 18px; }
  .dom_regist #tokuten_dom .detail ul{ justify-content: center; max-width: none; margin-top: 26px; font-size: 14px;}
  .dom_regist #tokuten_dom .detail li{ background-size: 114px auto!important; width: 100%; padding-top: 90px; }
  .dom_regist #tokuten_dom .detail li:nth-child(2){ margin-left: 40px;}
  .dom_regist #tokuten_dom .type{ margin: 26px 0 16px; font-size: 18px; }
  .dom_regist #tokuten_dom .type span{ font-size: 21px;}

  .dom_regist #tokuten_core{ padding: 60px 30px 40px; }
  .dom_regist #tokuten_core .close{ top: 4px; right: 20px; }
  .dom_regist #tokuten_core .tit{ font-size: 22px;}
  .dom_regist #tokuten_core .tit span{ font-size: 32px; }
  .dom_regist #tokuten_core .attList{ display: table; margin: 30px auto 0;}
  .dom_regist #tokuten_core img{ margin-bottom: 30px;}

  .dom_regist #tokuten_core .plan &gt; li{ width: 32%; padding-top:18px; margin-top: 0; }
  .dom_regist #tokuten_core .name{ font-size: 21px; }
  .dom_regist #tokuten_core .price{ margin-top: 4px; padding-bottom: 16px; font-size: 20px; }


  /* order_confirm
  **********************************************************************/
  .order_confirm .fade_btn li{ padding: 4px 18px; margin-left: 10px; font-size: 12px; }
  .order_confirm .login_other li{ width: 32%; height: 56px; line-height: 56px; }
  .order_confirm .login_other li:not(:first-child){ margin-top: 0;}

  .order_confirm .login_other .amazon img{ height: 56px;}
  .order_confirm .login_other #AmazonPayButton::before{ line-height: 56px;}
  .order_confirm .login_other .yahoo_btn{ height: 56px; line-height: 56px;}

  /* signup */
  .order_confirm .usage{ padding-top: 26px; }
  .order_confirm .usage p{ margin-bottom: 8px; }
  .order_confirm .usage .btn_area .btn_select{ height: 56px; line-height: 56px;}


  /* order_complete
  **********************************************************************/
  #content.order_complete{ padding-top: 60px;}
  .order_complete .white_area{ padding: 40px;}

  /* thanks */
  .order_complete #thanks .comp_tit{ background-size: 60px!important; padding-top: 80px; }

  /* server */
  .order_complete #server .input_area .catch{ margin-top: 0;}
  .order_complete #server dt{ font-size: 26px; }
  .order_complete #server dd{ font-size: 18px;}

  #regdom_comp #thanks dt{ font-size: 24px; }
  #regdom_comp #server .tit01{ font-size: 20px; }
  #regdom_comp #server &gt; div{ padding: 40px 40px 60px; }
  #regdom_comp #server .logo_area span{ font-size: 18px; }
  #regdom_comp .setbuyBox{ margin-top: 50px;}
  #regdom_comp .setbuyBox p{ text-align: left;}

  .order_complete .pay_list &gt; li{ width: 48.5%;}
  .order_complete .pay_list .detail{ padding: 20px;}
  .order_complete .pay_list .detail li:not(:first-child){ margin-top: 18px;}
  .order_payment .txt-check{ margin: 26px 0 -22px; }


  /* order_payment
  **********************************************************************/
  .order_payment .pay_detail .card &gt; div .btn{ width: 80px; margin-top: 0;}
}

@media print, screen and (min-width:960px){
  .miniheader{ padding-left: 20px; padding-right: 20px;}
  .miniheader a:hover{ text-decoration: underline;}
  .miniheader .miniheader_user a:hover{ text-decoration: none;}
  .miniheader .miniheader_user__menu a:hover{ color: #005bac!important;}
}


/*************************************************************************************************************************
* 980px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:980px){

  body.minihd{ min-height: calc(100vh - 88px); }

  /* buy_area */
  .buy_area{ width: 66%;}

  /* aside */
  aside{ width: 32%; }

  /* error */
  .error_back,
  .txt_area{ margin-left: auto; margin-right: auto; }
  .error_back,
  .txt_area a:hover{ text-decoration: none;}

  /* aside */
  aside .login:hover{ text-decoration: none;}


  /* order_index
  **********************************************************************/
  /* server */
	.order_index #server .sub_tit .tit{ width: auto;}
	.order_index .server_select .v1{ min-width: 120%; }
	.order_index .server_select li{ padding-right: 20px; padding-left: 20px;}
	.order_index .server_select input[type="radio"]{ top: 20px; left: 20px; }
	.order_index .server_select .tit{ font-size: 16px; }
	.order_index .wordpress .point{ width: auto; margin:0 0 0 16px;}

	.order_index #vai .sub_tit .tit{ width: auto;}
	.order_index .vai_select .v1{ min-width: 120%; }
	.order_index .vai_select li{ padding-right: 20px; padding-left: 20px;}
	.order_index .vai_select input[type="radio"]{ top: 20px; left: 20px; }
	.order_index .vai_select .tit{ font-size: 16px; }

  /* dom_regist */
  .dom_regist #server .sub_tit{ font-size: 20px; }
  .dom_regist #server .sub_tit i{ top: 5px;}
  .dom_regist .server_select__dom .btn_select{ padding-left:60px!important; }
  .dom_regist .server_select__dom input[type=radio]{ width: 20px; height: 20px; top: 16px; }
  .dom_regist .server_select__dom .tit{ font-size: 16px; }
  .dom_regist .server_select__dom a{ margin-left: 6px; }

  .dom_regist .modal-area{ margin: 60px auto 0; }
  .dom_regist #tokuten_core{ padding-left: 20px; }
  .dom_regist #tokuten_core .txt{ width: 24%; padding-top: 90px;}
  .dom_regist #tokuten_core .tit{ font-size: 18px; text-align: left;}
  .dom_regist #tokuten_core .tit span{ font-size: 26px; }
  .dom_regist #tokuten_core .attList{ display: block; }
  .dom_regist #tokuten_core .attList li{ margin-top: 20px;}
  .dom_regist #tokuten_core img{ margin: 64px auto 0;}
  .dom_regist #tokuten_core .plan{ width: 71%;}


  /* order_confirm
  **********************************************************************/
  .order_confirm .fade_btn li{ transition: background 0.3s ease-in-out 0s,border 0.3s ease-in-out 0s,color 0.3s ease-in-out 0s; }
  .order_confirm .fade_btn li:hover{ background: #005bac; color: white; border-color: #005bac; }
  .order_confirm .login_forgot:hover{ text-decoration: underline;}
  .order_confirm .login_other .gmoid a,
  .order_confirm .login_other #AmazonPayButton::before,
  .order_confirm .login_other .yahoo_btn{ transition: background 0.3s ease-in-out 0s; }

  .order_confirm .login_other .gmoid a:hover{ background-color: #eaf5ff; }
  .order_confirm .login_other #AmazonPayButton:hover::before{ background-color: #fff8ed!important; }
  .order_confirm .login_other .yahoo:hover .yahoo_btn{ background-color: #ffecef!important; }


  /* order_complete
  **********************************************************************/
  .order_complete .btn_area .whiteBtn:hover{ background: white!important;}


  /* order_payment
  **********************************************************************/
  .order_payment .balance_area .tit{ width: auto;}
  .order_payment .balance_area .price{ margin: 0;}
  .order_payment .pay_select &gt; li{ width: 31.8%; }
  .order_payment .pay_detail .card &gt; div .btn{ transition: background 0.3s ease-in-out 0s ,color 0.3s ease-in-out 0s; }
  .order_payment .pay_detail .card &gt; div .btn:hover{ background: #005bac!important; color: white!important;}
}

@media print, screen and (min-width:1180px){
  /* order_index
  **********************************************************************/
  /* dom_regist */
  .dom_regist #tokuten_core .tit{ font-size: 22px;}
  .dom_regist #tokuten_core .tit span{ font-size: 32px; }
}</pre></body></html>