@charset "UTF-8";
/*各ページ独自のcss設定*/


/*以下に指定を記述する*/

#page-top{
    position: fixed;
    bottom: 15px;
    right: 15px;
    background-color: var(--skyblue);
    color: var(--white);
    border: solid 1px var(--emeraldgreen);
    padding: 8px 14px 12px 14px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
    z-index: 999;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items:center;

    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);

     transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    visibility 0.4s;
}

#page-top.show {
  opacity: 0.8;
  transform: translateY(0);
  visibility: visible;
}

@media(hover:hover) and (pointer: fine){
#page-top:hover{
    background-color: var(--emeraldgreen);
    color: var(--white);
}
}

footer{
   background-color: var(--skyblue);
   padding-bottom: 10px;
}

.flex-horizontal{
   display: flex;
   justify-content: space-evenly;
   padding-top: 10px;
   padding-bottom: 30px;
}

.flex-vertical{
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.link{
   display: flex;
   flex-direction: column;
   gap: 3px;
   width: 141px;
}



.link span{
   display: inline-block;
   font-size: 12px;
   border-bottom: solid 0.75px;
   font-weight: 600;
}

.link a{
   font-size: 9px;
   text-decoration: none;
   color: #3e3a39;
}

.kari{
  /* display: none;*/
}

.bottom{
   margin: auto;
   text-align: center;
   font-size: 8px;
}

.bottom a{
   text-decoration: none;
   color: #3e3a39;
}

/*広告関連*/
.ad-container {
   padding: 30px 10% 0 10%;
}

.ad-image-large img{
   width: 100%;
}

.ad-image-small img{
   width: 49%;
}

.ad-image-large {
   width: 100%;
}

.ad-container img{
   transition: .3s;
}

.ad-container img:hover{
   opacity: 0.75;
   transition: .3s;
}


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


}
    

/*
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%になる
*/