/* すべてに適用 */
html {
    font-size: 16px;
    font-family: sans-serif;
    color: #102E76;
    background-color: #f5f5f5;
}
* {
    box-sizing: border-box;
}
/* メイン */
main {
    max-width: 1000px;
    margin: 90px auto 90px auto;
}
h1 {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 30px;
}
h2{
    font-size: 1.3rem;
    margin-bottom: 50px;
}
h3 {
    font-size: 1.1rem;
}
p {
    line-height: 2.0; /* 行間 */
    margin-top: 0;
    margin-bottom: 0;
}
img {
    max-width: 100%;    
}
a {
    color: #102E76;
    text-decoration: none;
}
.basic-text {
    width: 77%;
    text-align: left;
    margin: 30px auto 30px auto;
}
.link {
    color: #fa1e64;
    border-bottom: solid 1px;
}

@media (max-width: 767px) {
    main {
        font-size: 0.9rem;
    }
}

/* ヘッダー */
header {
    margin-top: 2rem;
}
.logoh1 {
    margin: auto;
    width: 250px;
    height: 30px;
}
.logoh1 a {
    text-align: center;
}
.navi ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-direction: row;
    margin-top: 50px;
    padding: 0;
}
  
/* フッター */
footer {
    text-align: center;
    font-size: 0.7rem;
    letter-spacing: 1.3px;
}

/* リンク関連 */

/* indexに適用 */
body.home main {
    margin-top: 0;
}
.home-gif {
    width: 100%;
    max-width: 500px;
    display: block;
    margin: 0 auto;
}
.ezine {
    width: 320px;
    margin: auto;
    background-position: center;
    border-radius: 25px;
}
.ezine p {
    padding: 2rem 1rem;
    text-align: center;
}
.ezine a {
    color: #fa1e64;
    border-bottom: solid 1px;
}
.homelogo ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-direction: row;
    margin-bottom: 50px;
    padding: 0;
}
.homelogo img {
    width: 32px;
    height: 32px;
}
.home-news {
    width: 75%;
    max-width: 500px;
    margin: 1.5rem auto; /* 中央寄せ */
    text-align: left;
}
.home-news p {
    line-height: 1rem;
    margin-top: 0.5rem;
}
.home-news-line {
    border-bottom: solid 1px #9b9abb;
    padding-bottom: 0.8rem;
}
.home-news time {
    font-size: 0.75rem;
}
.home-now {
    margin-top: 50px;
}
.home-now ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
    padding: 0;
}
.home-now-icon {
    width: 200px;
    margin: 0 auto;
}

@media (max-width: 767px) {
   .homenewsbox {
        width: 330px;
   }
    .home-now ul {
        display: grid;
        gap: 2rem;
    }
}

@media screen and (min-width: 768px) {
    .ezine {
        width: 350px;
    }
}

/* newsに適用 */
.newstime {
    font-size: 0.7rem;
    letter-spacing: 0.1rem;
}
.news-02 {
    width: 80%;
    max-width: 500px;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
}

/* aboutに適用 */
.icon {
    width: 300px;
    height: 300px;
    overflow: hidden;
    border-radius: 50%;
    margin: 0 auto;
    background-position: center;
}
.profile {
    text-align: left;
    width: 300px;
    margin: auto;
}
.profile-ol {
    list-style-type: none;
    padding-left: 0;
}
.profile li {
    margin-top: 0.5rem;
    padding-left: 1rem;
}
.profile a {
    list-style-type: none;
}
@media screen and (min-width: 768px) {
    .profile-ol {
        display: flex;
        justify-content: center;
        gap: 40px;
        flex-direction: row;
        margin-top: 50px;
        padding: 0;    
    }
    .profile {
        margin-top: 40px;
    }
}


/* blogに適用 */
.blogimg {
    width: 300px;
    height: 300px;
    overflow: hidden; /* はみ出した分非表示 */
    margin: 0 auto;
    background-position: center;
    border-radius: 10px;
}
.blog {
    text-align: left;
    width: 300px;
    margin: 30px auto;
}
.blog-ol {
    list-style-type: none;
    padding-left: 0;
}
.blog li {
    margin-top: 0.5rem;
    padding-left: 1rem;
}
.blog p {
    padding: 5px 0;
}
.blog a {
    list-style-type: none;
}
.blog-time {
    font-size: 0.7rem;
    letter-spacing: 0.1rem;
}
.blog-title {
    font-size: 1.5rem;
    border-top: solid 1px #102E76;
}
.blog-category {
    font-size: 0.8rem;
}
.blog-arrow {
    margin-top: 1rem;
    margin-right: 1rem;
    text-align: right;
}
.blog-h1 {
    margin-top: 45px;
}

@media screen and (min-width: 768px) {
    .blog-ol {
        display: flex;
        justify-content: center;
        gap: 40px;
        flex-direction: row;
        margin-top: 50px;
        padding: 0;    
    }
    .blog {
        margin: auto;
    }
}

/* POSTページに適用　*/
.posttop {
    display: block; /* 中央寄せにするため */
    width: 85%;
    max-width: 350px;
    margin: 0 auto 50px auto;
}
.posttop-p {
    font-size: 0.8rem;
    width: 80%;
    max-width: 350px;
    margin: 30px auto;
    text-align: left;
}
.postimg {
    display: block; /* 中央寄せにするため */
    width: 85%;
    max-width: 350px;
    margin: 0 auto;
    aspect-ratio: 1 / 1; /* 正方形を維持 */
    object-fit: cover;
    border-radius: 10px;
}
.post {
    width: 80%;
    max-width: 350px;
    margin: 30px auto;
    text-align: left;
}
.post p {
    padding: 5px 0;
}
.post a {
    list-style-type: none;
}
.posttime {
    text-align: right;
    padding: 5px;
}
.posttime time {
    display: inline-block;
    font-size: 0.65rem; 
}
.asterisk {
    text-align: center;
    font-size: 1.0rem;
    letter-spacing: 0.5rem;
    margin-bottom: 2rem;
}

@media screen and (min-width: 768px) {
    .posttop {
        max-width: 450px;
    }
    .postimg {
        max-width: 450px;
    }
    .post {
        max-width: 450px;
    }
}



/* 個別ページに適用 */
.leftline {
    border-left: solid 3px rgb(248, 121, 161);
    padding-left: 1rem;
    padding-bottom: 1px;
}
.leftline-y {
    border-left: solid 4px rgb(233, 226, 33);
    padding-left: 1rem;
    padding-bottom: 1px;
}
.leftline-g {
    border-left: thick double rgb(76, 159, 176);
    padding-left: 1.5rem;
    margin-left: 1rem;
}


/* あ、little light!に適用 */
.all-box {
    margin: auto;
    border: solid 1px #102E76;
    border-radius: 10px;
}
.all-box p {
    padding: 1.5rem;
    font-size: 0.8rem;
}
.all-box a {
    color: #fa1e64;
    border-bottom: solid 1px;
}
@media screen and (min-width: 768px) {
    .all-box p {
        font-size: 0.9rem;
    }
}

/* どんくさく生きて下さい。に適用 */
.blogb {
    background-position: center;
    margin: 0px auto;
}
.blogb img {
    margin-bottom: 2rem;
}
.blogb-E {
    background-position: center;
    margin: 0px auto;
}
.leftline-R {
    border-left: solid 4px rgb(195, 46, 46);
    padding-left: 1rem;
    padding-bottom: 1px;
}
@media screen and (min-width: 768px) {
    .blogb-E {
        width: 70%;
        margin: auto;
    }
}

/* diaryに適用 */
.diaryimg {
    width: 300px;
    margin: 20px auto;
    background-position: center;
}
.text-gray {
    font-size: 0.8rem;
    color: #3d5794;
}
.button {
    width: 77%;
    height: 50px;
    margin: auto;
    padding-left: 0;
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}
.button span {
    margin: auto 1rem;
    color: #f4a700;
    font-size: 1.3rem;
}
.indent {
    padding-left: 1rem;
}
.center {
    text-align: center;
}
