/* ============================================
     3. ここから下に自分のスタイルを書いていく
     ============================================ */
@charset "UTF-8";

main{
   text-align: justify;
    background: #ccc
}

.main_wrapper{
   display: flex;
   flex-direction: column;
}

p.sitepolicy{
   font-size: 18px;
}

.first_explain {
   margin: 0px 30px;
   background: var(--clr-beige);
}

p.this_webpage{
   font-size: 12px;
}

.mailtoui {
   color: var(--clr-text);
   font-weight: bold;
   text-decoration: underline;
}

.domain::before {
   content: '@';
   font-weight: bold;
}

.q_and_a{
   display: flex;
   flex-direction: column;
   margin: 20px 30px;
}

.box {
   position: relative;
   margin: 20px 0px;
   display: flex;
   flex-direction: column;
   background-color: var(--clr-beige);
   padding: 15px 20px;
   border: 10px solid transparent; /* 透明な枠 */
}
 
 .box::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: 1px solid var(--clr-blue); /* 破線の色と太さ */
   pointer-events: none; /* クリックをブロックしない */
}
 

.title_wrapper {
   position: relative;
}

.title_wrapper::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 1px;
   background-color: var(--clr-blue);
   border-radius: 2px;
}


p.title {
   font-size: 14px;
   padding-bottom: 5px;
   font-weight: bold;
}


.explain_wrapper{
   margin-top: 10px;
}

p.explain{
   font-size: 12px;
}


.back{
   background-color: var(--clr-beige);
   outline: solid 4px var(--clr-beige);
   display: flex;
   border-radius: 15px;
   border: solid 2px var(--clr-blue);
   width: 100px;
   margin: 0 auto;
   height: 50px;
   justify-content: center;
   flex-direction: column;
   margin-top: 50px;
   margin-bottom: 20px;
   text-decoration: none;
   text-align: center;
   color: var(--clr-blue);
   font-size: 10px;
   font-weight: bold;
   transition: all 0.2s ease;
}

@media screen and (min-width:1024px){
/*レスポンシブ用*/

   .main_wrapper{
      width: 70%;
      margin: 0 auto;
   }


   p.title{
      font-size:20px ;
   }


   p.explain,p.this_webpage{
      font-size: 16px;
   }


   .title_wrapper::before {
      top: 16px;
      width: 5px;
      height: 20px;
   }



   .q_and_a{
      margin: 30px 0px;
   }

   .box {
      margin: 20px 0px;
      display: flex;
      padding: 15px 20px;
      border: 10px solid transparent; /* 透明な枠 */
   }

   .first_explain {
      margin: 0px;
   }


   .box {
      margin: 20px 0px;
      display: flex;
      padding: 20px 25px;

   }

   .explain_wrapper {
      margin-top: 15px;
   }

   .box::after {
      border: 1.2px solid var(--clr-blue); 
   }

   .back{
      width: 150px;
      height: 75px;
      font-size: 15px;
      margin-bottom: 50px;
   }

   .back:hover {
      border-color: var(--clr-orange);
      color: var(--clr-orange);
      transform: scale(1.05);
   }
}



























/*
フォント設定
ヒラギノ明朝ProN　太さ：普通
font-weight: 300;

ヒラギノ明朝ProN　太さ：太い
font-weight: 600;
*/


/*
css概説（復習用　要らなければ消してください）

vol.1 用語の解説

セレクタ…装飾をつけたい対象の要素のこと
属性…セレクタに施したい装飾の種類
値…セレクタに施したい装飾の具体的内容

例：h1{color:red;}
h1がセレクタ　colorが属性　redが値

vol.2 セレクタの指定
①要素名で指定
h1{color:red;}

②class名で指定
.class{color:red;}

③id名で指定
#id{color:red;}

④要素名プラスclass名で指定
div.class{color:red;}

⑤要素名プラスid名で指定
div#id{color:red;}

⑥要素の位置から指定
header div{color:red;}   
↑スペースを入れる（ここではheader内のdiv要素を指定）

vol.3 属性・値の指定

①{属性:値;}の形で記述
{color:red;}

②１つのセレクタに対する指定はまとめて記述できる
h1{
   color:red;
   width:90%;
}

③指定が重複したら後の行にあるものが優先
h1{
   color:red;
   width:90%;
   color:blue;
}
↑ここではh1はblueになる

④指定が重複したらより特定が強いものが優先
h1{
   color:red;
   width:90%;
}
header h1{
   color:blue;
}
↑ここではheader内のh1はcolorがblue、widthが90%になる
*/