@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.topbottomimg{
float: right;
max-width: 40%;
margin-right:1.5em;
margin-top: -5em;
}

.topbox001{
    background-image: url(/wp-content/themes/cocoon-child-master/img/bg001.jpg);
    background-size: cover;
    padding: 3em 20em 10em 6em;
    background-repeat: no-repeat;
margin-bottom: 5px;
aspect-ratio: 16 / 10;
}
.topbox002{
    background-image: url(/wp-content/themes/cocoon-child-master/img/bg002.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;

}

.box1{
margin: -2.5em auto 3em;
    display: block;
    max-width: 500px;
font-size: medium;
}

.list00{
margin:0 auto;
display:block;
max-width:500px;
}
.list00 dl{
padding: 15px 0;
border-bottom: 1px solid #ccc;
padding-bottom: 2em;
}
.list00 dt{
padding-bottom: 5px;
float: left;
margin-left:1em;
}

.list00 dd{
padding-bottom: 5px;
margin-right:1em;
float:right;
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
.topbox001{
padding: 2em 18em 3em 2em;
}

    #navi .navi-in > .menu-mobile li {
        width: calc(50% - 1em);
        margin: .2em;
}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
.topbox001{
padding: 0em 8em 2.5em 0.4em;
}
.topbottomimg{
float: right;
max-width: 30%;
margin-right:1.5em;
margin-top: -1em;
}

}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
    .topbox001 {
        padding: 1em 7em 2.5em 1em;
    }
}
}