@charset "utf-8";

/*===================================================================
　コンテンツ枠装飾
=====================================================================*/

.waku_box{
   margin: 8px 15px 15px 2px;
   padding: 8px 18px 8px 12px;
   line-height: 1.8;
   letter-spacing: 0.05em;
   box-shadow: 2px 2px 5px gray;
   border-top: solid 1px #eee;
   border-left: solid 1px #eee;
   background-color: #fefefe;	/*背景色（古いブラウザだとここの色のみが出ます）*/
}

.gray_box1 {
   margin: 15px 15px 15px 2px;
   padding: 4px 15px;
   line-height: 1.8;
   letter-spacing: 0.05em;
   border: solid 1px #dddddd;
   background-color: #f4f4f4;
}

.gray_box2 {
   margin: 0 2px 10px 2px;
   padding: 4px 15px;
   line-height: 1.8;
   letter-spacing: 0.05em;
   background-color: #f0f0f0;
}

.blue_box {
   margin: 15px 15px 15px 2px;
   padding: 4px 10px 4px 15px;
   line-height: 1.8;
   letter-spacing: 0.05em;
   border: solid 3px #337db8;
   border-radius: 0.5em;/*角丸*/
}

.orange_box{
   margin: 15px 15px 15px 2px;
   padding: 4px 15px;
   background: white;
   border-top: solid 5px #ff7500;
   box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}

.yellow_box{
    margin: 0.5em 1em 1em 0;
    background: #ffcc33;
    border-radius: 25px;
    position: relative;
    padding: 0.8rem 1.2rem 0.8rem 1.2rem;
}

.white_box1 {
   margin: 10px;
   padding: 4px 5px;
   line-height: 1.8;
   letter-spacing: 0.05em;
}

.white_box2 {
   margin: 0 10px 10px 10px;
   padding: 6px 10px 6px 10px;	        /*上下、左右への余白*/
   line-height: 1.8;
   letter-spacing: 0.05em;
}

.white_box3 {
   margin: 15px 15px 15px 2px;
   padding: 4px 15px;
   line-height: 1.8;
   letter-spacing: 0.05em;
   border: solid 2px black;
}

/*--- crossbox  --- */
.cross_box {
   position: relative;
   padding: 8px 18px 8px 20px;
   border-top: solid 3px #337db8;
   border-bottom: solid 3px #337db8;
}
  .cross_box :before, .cross_box :after {
   content: '';
   position: absolute;
   top: -7px;
   width: 3px;
   height: -webkit-calc(100% + 14px);
   height: calc(100% + 14px);
   background-color: #337db8;
}
   .cross_box :before {
   left: 7px;
}
  .cross_box :after {
   right: 7px;
}

/*--- campaignボックス  --- */
.campaign_box {
   margin: 2em 0;
   background: #fff;
   border: solid 1px #cc0000;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.campaign_box .box-title {
   font-size: 1.15em;
   background: #cc0000;
   padding: 4px;
   text-align: center;
   color: #fff;
   font-weight: bold;
   letter-spacing: 0.05em;
   border-radius: 0.1em;/*角丸*/
   margin-bottom: 10px; 
}
.campaign_box p {
    padding: 15px 20px;
    margin: 0;
　　aspect-ratio: 170 / 63;
}

/*--- tel_box  --- */
.tel_box {
   margin: 2em 0;
   background: #fff;
   border: solid 1px #442404;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.tel_box .box-title {
   font-size: 1.15em;
   text-align: center;
   padding: 10px 4px;
   background: -webkit-repeating-linear-gradient(-45deg, #442404, #442404 10px,#522c05 10px, #522c05 17px);
   background: repeating-linear-gradient(-45deg, #442404, #442404 10px,#522c05 10px, #522c05 17px);
   color: #fff;
   font-weight: bold;
   letter-spacing: 0.05em;
}
.tel_box p {
    padding: 15px 20px;
    margin: 0;
}


/*---7つの理由 pointボックス  --- */
.box_point {
    margin: 2em 0;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box_point .box-title {
    padding: 1em;
    margin: 0.5em 0;
    color: #533204;
    border-top: solid 2px #ffcc33;
    border-bottom: solid 6px #ff7500;
    font-size: 1.2em;
    background: #fffadf;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box_point p {
    font-size: 1.1em;
    padding: 15px 10px 15px 15px;
   line-height: 1.5;
}


/*---このような悩み・・タイトル（見出しドットボックス）---*/
.box_w { /* worry */
    margin: 2em 0;
    background: #fff;
    padding: 0.2em 1.5em 1em; /* ボックス内側余白 */
    border: 6px solid #eee8aa;	/* ボックスの線 (太さ　種類　色)*/
}
.box_w .box-title {
    padding: 1em 0 0.2em;
    margin: 0 0 0.8em;
    color: #333;
    border-bottom: dotted 3px #ccc;/*点線*/
    font-size: 1.5em;
    text-align: center;	/* タイトル中央寄せ */
    font-weight: bold;
    letter-spacing: 0.05em;
}

/*---アコーディオン---*/

.accordion {
    margin: 2em 0;
    margin-bottom: 7px;
    border-bottom: 2px solid #d0d0d0;
}

.accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

details summary::-webkit-details-marker {
  display: none; /* Chrome、Safari用 */
}

details summary::marker {
  display: none; /* Firefox用 */
}
.accordion summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .3s;
}

.accordion[open] summary::after {
    transform: rotate(225deg);
}

.accordion p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 2em 1.5em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.accordion[open] p {
    transform: none;
    opacity: 1;
}

/*---H1用のclass---*/
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/*===================================================================
　立体的なボタン装飾
=====================================================================*/

.square_btn{
   display: inline-block;
   padding: 0.1em 1em;
   text-decoration: none;
   background: #668ad8;/*ボタン色*/
   color: #FFF;
   border-bottom: solid 4px #627295;
   border-radius: 5px;
}
.square_btn:active {/*ボタンを押したとき*/
   -ms-transform: translateY(4px);
   -webkit-transform: translateY(4px);
   transform: translateY(4px);/*下に動く*/
   border-bottom: none;/*線を消す*/
}

/*----------------------
スマホ切り替えボタン
------------------------*/

a.btn--orange {
  color: #fff;
  background-color: #eb6100;
  border-radius: 2em;/*角丸*/
}

a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

a.btn-c {
  font-size: 1.1rem;
  position: relative;
  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
}

a.btn-c i.fa {
  margin-right: 1rem;
}

a.btn-c:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 1.2rem;
  line-height: 1;
  position: absolute;
  top: calc(50% - .8rem);
  right: 1rem;
  margin: 0;
  padding: 0;
  /*content: '\f054';*/
}

/* ===========================
　蛍光ライン（太いマーカー線）
==============================*/
.red_line{ background: linear-gradient(transparent 60%, #ffcccc 0%);}
.pink_line{ background: linear-gradient(transparent 60%, #FFDFEF 0%);}
.blue_line{ background: linear-gradient(transparent 60%, #cce5ff 0%);}
.yellow_line{ background: linear-gradient(transparent 60%, #ffffbc 0%)}

/* ===========================
　蛍光ライン（細いマーカー線）
==============================*/
.red_line_narrow{ background: linear-gradient(transparent 80%, #ff9999 0%);}
.pink_line_narrow{ background: linear-gradient(transparent 80%, #ffb2d8 0%);}
.blue_line_narrow{ background: linear-gradient(transparent 80%, #add6ff 0%);}
.yellow_line_narrow{ background : linear-gradient(transparent 80%, #ffff7f 0%);}


/*===================================================================
　文字カラー装飾
=====================================================================*/
/*---red---*/
.red { color: #e60000;}
.red_b { color: #e60000; font-weight: bold;}
.red_big { color: #e60000;  font-weight: bold;  font-size: 1.2em;}
.red_big_x { color: #e60000; font-weight: bold; font-size: 1.4em;}
.red_big_xx { color: #e60000; font-weight: bold; font-size: 1.6em;}


/*---brown---*/
.brown { color: #442404;}
.brown_b { color: #442404; font-weight: bold;}
.brown_big { color: #442404; font-weight: bold; font-size: 1.2em;}
.brown_big_x { color: #442404; font-weight: bold; font-size: 1.4em;}
.brown_big_xx { color: #442404; font-weight: bold; font-size: 1.6em;}
.brown_big_xxx { color: #442404; font-weight: bold; font-size: 1.8em;}

/*---blue---*/
.blue { color: #0000ff;}
.blue_b { color: #0000ff; font-weight: bold;}
.blue_big { color: #0000ff; font-weight: bold; font-size: 1.2em;}
.blue_big_x { color: #0000ff; font-weight: bold; font-size: 1.4em;}
.blue_big_xx { color: #0000ff; font-weight: bold; font-size: 1.6em;}
.blue_big_xxx { color: #0000ff; font-weight: bold; font-size: 1.8em;}

/*---orange---*/
.orange { color: #ff5400;}
.orange_b { color: #ff5400; font-weight: bold;}
.orange_big { color: #ff5400; font-weight: bold; font-size: 1.2em;}
.orange_big_x { color: #ff5400; font-weight: bold; font-size: 1.4em;}
.orange_big_xx { color: #ff5400; font-weight: bold; font-size: 1.6em;}
.orange_big_xxx { color: #ff5400; font-weight: bold; font-size: 1.8em;}

/*---green---*/
.green { color: #008000;}
.green_b { color: #008000; font-weight: bold;}
.green_big { color: #008000; font-weight: bold; font-size: 1.2em;}
.green_big_x { color: #008000; font-weight: bold; font-size: 1.4em;}
.green_big_xx { color: #008000; font-weight: bold; font-size: 1.6em;}
.green_big_xxx { color: #008000; font-weight: bold; font-size: 1.8em;}

/*-- bigサイズ --*/
.b1 { font-size: 110%;}
.b2 { font-size: 120%;}
.b3 { font-size: 130%;}
.b4 { font-size: 140%;}
.b8 { font-size: 180%;}
.b10 { font-size: 200%;}

/*-- big boldサイズ --*/
.b { font-size: 100%; font-weight: bold;}
.big { font-size: 110%; font-weight: bold;}
.big_x { font-size: 120%; font-weight: bold;}
.big_xx { font-size: 130%; font-weight: bold;}
.big_xxx { font-size: 160%; font-weight: bold;}
.big_xxxx { font-size: 180%; font-weight: bold;}
.big_xxxxx { font-size: 200%; font-weight: bold;}

/*-- ミニフォントサイズ --*/
.mini1 { font-size: 10px;}
.mini2 { font-size: 12px;}
.mini3 { font-size: 14px;}
.wl { width: 96%;}
.ws { width: 50%;}

/*文字間隔指定
------------------------------------------------------------------------------------------------*/
.ls1 {letter-spacing: 10px;}
.ls2 {letter-spacing: 30px;}
.ls3 {letter-spacing: -2px;}

/*段落装飾
------------------------------------------------------------------------------------------------*/
.mb1{ margin-bottom: 1em;}
.mb2{ margin-bottom: 2em;}
.mb5{ margin-bottom: 5em;}

/*行揃えの位置・均等割付を指定する
---------------------------------------------------------------------------*/
.c {text-align: center;} /*中央寄せ*/
.r {text-align: right;}　　/*右寄せ*/
.l {text-align: left;}　　 /*左寄せ*/

/*縦方向の揃え位置を指定する
---------------------------------------------------------------------------*/
.v_b { vertical-align:baseline; }　　　　/*ベースライン初期値*/
.v_t { vertical-align:top; }　　　　 　　/*上揃え*/
.v_m { vertical-align:middle; }　　　　　/*中央揃え*/
.v_bottom { vertical-align:bottom; }　　/*下揃え*/
.v_ttop { vertical-align:text-top; }　　/*テキストの上揃え*/
.v_tbottom { vertical-align:text-bottom;}/*テキストの下揃え*/