@charset "utf-8";

/* =================================================== */
/* SET
/* =================================================== */

@media only screen and (min-width: 481px) and (max-width:768px) {
/* タブレット向けの処理 */
}

@media only screen and (min-width: 0px) and (max-width:480px) {
/* スマホ向けの処理 */
}

@media only screen and (max-width: 480px) {
	

}



/* =================================================== */
/* 共通
/* =================================================== */

/* responsive view =========== */
@media only screen and (min-width: 0px) and (max-width:480px) {
  .pc-mode-view {
    display: none !important;
  }
  .smp-mode-view {
    display: block !important;
  }
}

/* style =========== */
@media only screen and (min-width: 0px) and (max-width:480px) {
  .txt-size-S {
    font-size: 0.7rem;
  }
  .txt-size-M {
    font-size: 0.9rem;
    line-height: 1.6;
  }
  
  .br-none, .br-visible, .pc-view {
    display: block;
  }
  

  .cp-obi {
    font-size: 1rem;
  }
}

/* button =========== */
@media only screen and (min-width: 0px) and (max-width:480px) {
  .button-area.md-group {
    padding: 40px 0 0;
  }
  
  /* #Type*/
  .button-block.type-A a {
    font-size: 0.8rem;
    padding-right: 10px;
  }

  /* #Icon*/
  .button-block a.icon-web {
    background-size: 39px 27px;
    background-position: left 10px center;
    padding-left: 55px;
    height: 90px;
  }

  .button-block a.icon-estimate {
    background-size: 26px 27px;
    background-position: left 15px center;
    padding-left: 55px;
    height: 90px;
  }
}

  
/* =================================================== */
/* Second Page
/* =================================================== */

@media only screen and (min-width: 0px) and (max-width:480px) {
  .guide-page {
    width: 100%;
    min-width: auto;
  }
}


/*----------------------------------
 Guide page
----------------------------------*/
@media only screen and (min-width: 0px) and (max-width:480px) {
  .guide-page h2.ttl-box img {
    text-align: center;
    margin: 0 auto;
  }
  .guide-page .container .tab-box {
    min-width: auto;
  }
  .guide-page .container .tab-box li a {
    padding: 10px 3px;
    font-size: 1rem;
  }
  .guide-page .container .tab-box .smp-mode-fnt {
    font-size: 0.6rem;
    width: 100%;
    display: block;
  }
  .guide-page section.blocks {
    padding-bottom: 30px;
  }
  .guide-page section.blocks h3.ttl-box.mgt-set {
    margin-top: 50px;
  }
  
  .guide-page section.blocks .step-block {
    width: 100%;
    margin: 40px auto 0;
  }
  
  .guide-page section.blocks h3.ttl-box {
    font-size: 1.4rem;
    padding: 20px 5px;
  }
  
  .guide-page section.blocks .step-block .img-box {
    float: none;
  }
  .guide-page .smp-ver section.blocks .step-block .img-box,
  .guide-page .atena-smp-ver section.blocks .step-block .img-box {
    width: 260px;
    margin: 0 auto;
  }
  .guide-page .pc-ver section.blocks .step-block .img-box,
  .guide-page .atena-ver section.blocks .step-block .img-box {
    width: auto;
    padding: 0 10px;
  }
  .guide-page section.blocks .step-block .txt-box {
    float: none;
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 15px 10px 0;
  }
  .guide-page .smp-ver section.blocks .step-block .txt-box,
  .guide-page .atena-smp-ver section.blocks .step-block .txt-box {
    width: auto;
  }
  .guide-page .pc-ver section.blocks .step-block .txt-box,
  .guide-page .atena-ver section.blocks .step-block .txt-box {
    width: auto;
  }
}

@media only screen and (min-width: 0px) and (max-width:480px) {
  /* Atena =========== */
  
  .guide-page .atena-ver section.blocks,
  .guide-page .atena-smp-ver section.blocks {
    padding-bottom: 40px;
    padding-top: 20px;
  }
  .pageindex-block {
    width: auto;
    margin: 0 10px 20px;
  }
  .pageindex-block .read-box {
    font-size: 1rem;
  }
  .pageindex-block dt {
    font-size: 0.9rem;
  }
  .pageindex-block dd {
    font-size: 0.8rem;
  }
  .guide-page section.blocks h4.ttl-box {
    width: auto;
    margin: 40px 10px 20px;
    font-size: 1.1rem;
    padding-left: 10px;
  }

  .guide-page section.blocks .annot-box {
    margin: 0 10px;
    width: auto;
  }
  
}

/*----------------------------------
 Custom postcard
----------------------------------*/
@media only screen and (min-width: 0px) and (max-width:480px) {
  .custom-postcard .container{
    width: auto;
    margin: 60px 0;
  }

  .custom-postcard .flex-container{
    display: block;
    margin: 28px 16px 32px;
  }

  .custom-postcard .first-visual .img-box{
    width: 100%;
  }

  .custom-postcard .first-visual .text-box{
    width: 100%;
    margin-top: 20px;
    font-size: 1rem;
    line-height:2.25;
  }

  .custom-postcard .first-title{
    font-size: 1.8rem;
    line-height:1.88;
    font-weight: 700;
    margin-bottom: 18px;
  }

  .custom-postcard .step-area{
    width: 100%;
    margin: auto;
    text-align: center;
    margin-bottom: 60px;
  }

  .custom-postcard .step-area-title{
    border-radius: 20px;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 16px 42px;
    padding: 4px 0;
  }

  .custom-postcard .about-create{
    margin-bottom: 42px;
    text-align: left;
  }

  .custom-postcard .about-create p{
    margin: 0 16px;
  }

  .custom-postcard h3{
    padding: 14px 0;
    font-size: 1.6rem;
    font-weight: 700;
  }

  .custom-postcard .about-create p{
    font-size: 1.2rem;
    line-height:1.67;
    margin-top: 24px;
  }


  .custom-postcard-detail,
  .custom-insatsu-detail{
    margin:0 16px 48px;
  }

  .custom-postcard .important-point-area .important-point-title:before{
    content: '●';
  }

  .custom-postcard .h2-ttl-box{
    font-size: 0.9rem;
    padding: 12px 0;
  }

  .custom-postcard .flex-container-td{
    display: block;
    margin: 30px 0 48px;
  }

  .custom-postcard .flex-container-td .img-box{
    width: 90%;
    margin: 24px auto 34px;
  }

  .custom-postcard .important-point-area{
    background-color: #f5f5f5;
    margin-bottom: 0;
    padding: 20px 24px 34px;
  }

  .custom-postcard .important-point-area-thr{
    background-color: #f5f5f5;
    margin-bottom: 32px;
    padding: 20px 0 34px 0;
    margin-left: 16px;
    margin-right: 16px; 
  }

  .custom-postcard .important-point-title{
    font-size: 1.2rem;
    font-weight: 700;
    margin: 16px 0 6px;
  }

  .custom-postcard .inportant-point-detail{
    font-size: 0.9rem;
    line-height:2.1;
    margin: 2px 0 4px 2px;
  }


  .custom-postcard .important-point-title-center{
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 16px;
  }

  .custom-postcard .important-point-area-thr ul{
    font-size: 0.9rem;
    line-height:1.6;
    padding-left: 48px;
  }

  .custom-postcard .important-point-area-thr .li-black li,
  .custom-postcard .important-point-area-thr .li-red li,
  .custom-postcard .important-point-area-thr .li-red-sm li,
  .custom-postcard .order-important-point .li-black li{
    padding: 4px 0;  
  }

  .custom-postcard .important-point-area-thr .li-red{
    margin-top: 14px;
    font-size: 0.8rem;
    line-height:1.71;
    color: #ff0000;
    list-style: none;
    padding-left: 28px;
  }
  .custom-postcard .important-point-area-thr .li-red li:before{
    content: '※';
  }

  .custom-postcard .important-point-area-thr .li-red-sm{
    font-size: 0.8rem;
    line-height:1.71;
    color: #ff0000;
    padding-left: 58px;
    list-style: disc;
  }

  .custom-postcard .order-important-point .important-point-title-center{
    margin: 24px 0;
  }

  .custom-postcard .order-important-point .li-black{
    padding: 20px 32px 20px 36px;
    background-color: #f5f5f5;
    margin-left: 16px;
    margin-right: 16px; 
    padding: 32px 32px 32px 48px;
    font-size: 0.9rem;
  }


  /* Custom postcard table =========== */

  .custom-postcard table{
    text-align: left;
    width: 90%;
    margin: auto;
  }
  .custom-postcard table tr{
    border: solid 1px #999999; 
  }
  .custom-postcard table td{
    border: none; 
    padding: 14px 20px;
    display: block;
  }

  .custom-postcard table th{
    background-color: #fff2f5;
    border: none;
    border-bottom: solid 1px #999999; 
    padding: 14px 24px;
    display: block;
  }

  /* Custom postcard Button =========== */
  .custom-postcard .btn-set {
    text-align: center;
    margin-top: 42px;
    margin-bottom: 42px;
  }
  .custom-postcard .btn-set {
    width: 100%;
  }
  .custom-postcard .btn-set .btn-box {
    margin: 0 auto;
    width: 90%;
  }
  .custom-postcard .btn-set .btn-box a {
    display: inline-block;
    width: 100%;
    padding: 12px;
    color: #333;
    line-height: 1;
    border: #999 solid 1px;
    font-size: 0.9rem;
  }
  .custom-postcard .btn-set .btn-box a span:before{
    content: '\f07a';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.8rem;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-right: 5px;
  }
  .custom-postcard .btn-set .btn-box a:hover,
  .custom-postcard .btn-set .btn-box a:active {
    background: #dcdcdc;
    text-decoration: none;
  }

  .custom-postcard .btn-set .btn-box_03 {
    margin: 0 auto;
    width: 300px;
  }
  .custom-postcard .btn-set .btn-box_03 a {
    display: inline-block;
    text-align: center;
    width: 100%;
    padding: 1.4rem;
    color: #fff;
    font-weight: 600;
    line-height: 1;
    background-color: #213868;
    border-radius: 26px;
    font-size: 1.2rem;
  }

  .custom-postcard .btn-set .btn-box_03 a:hover,
  .custom-postcard .btn-set .btn-box_03 a:active {
    opacity: 0.6;
    transition: 0.2s;
    text-decoration: none;
  }

}


/*----------------------------------
 Contact Form
----------------------------------*/
@media only screen and (min-width: 0px) and (max-width:480px) {
  .contact-page .form-area .message-block {
    width: auto;
    margin-top: 25PX;
    margin: 20px 10px 0;
    border: #EEE solid 2px;
    padding: 10px;
  }
  .contact-page .form-area .message-block .ttl-box {
    margin-bottom: 10px;
  }
  .contact-page .form-area .message-block .note {
    line-height: 1.6;
  }
  
}