@charset "utf-8";

/* 共通
-------------------------------------*/
html{
    background-color: #ddf7f3;
    font-family: sans-serif;
    box-sizing: border-box;
}

main {
    margin: 0 auto;
    max-width: 750px;
}

main img {
    width: 100%;
}

h1{
    text-align: center;
    border-top: solid 10px #43c8ed;
    border-bottom: solid 10px #43c8ed;
    background-color: #ffffff;
    padding: 20px;
}

h1 a {
    color:#2f37aa;
    font-family:  "Hachi Maru Pop", cursive, sans-serif;    
    font-style: normal;
    text-decoration: none;
    font-size: 3rem;
}

h2 {
    font-family:  "Hachi Maru Pop", cursive, sans-serif;    
    font-style: normal;
    text-decoration: none;
    color:#2f37aa;
}

p {  
    font-size: 0.9rem;
}

.top {
    text-align: center;
}

.rakuten_banner{
    display:flex;
    justify-content: space-between;
}

.rakuten_banner-a {
    width: 45%;
}

.rakuten_banner-a {ß
    width: 45%;
}

.Amazon_banner{
    display:flex;
    justify-content: space-between;
}

.Amazon_banner-a {
    width: 65%;
}
.Amazon_banner-b {
    width:25%;
}

footer{
    text-decoration: none;
    text-align: center;
}

/* index.html
-------------------------------------*/

.main_image{
    border: solid 4px #43c8ed;
    border-radius: 10px;  
}


section {
    margin-bottom: 30px;
    text-align: center;
    padding-right: 8px;
}

section h2 {
    margin-bottom: 0;
}

.grid{
    width: 100%;
    display: grid;
    gap: 1rem 1.5rem;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    background-color: #ffffff;
    border: solid 4px #43c8ed;
    border-radius: 10px;
    padding: 5px;
    line-height:0.3rem;
}

.item {
    display:block;
    background-color: #cafed6e9;
    margin: 0 5px;
    padding: 5px;
    border-radius: 10px;
}

.item a {
    text-decoration: none;
}

.item img {
    border-radius: 5px;
}

.item p {
    margin: 3px;
    line-height: 1rem;
}

.main_image{
    max-width: 100%;
    text-align: center;
}



.introduction p{
    background-color: #ffffff;
    border-radius:10px;
    border:solid 4px #43c8ed;
    max-width: 400px;
    padding: 10px;
    margin-top: 30px;

}

/*記事
-------------------------------------*/
.text {
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: dashed 3px #2f37aa;
}

.text p {
    background-color: #ffffff;
    padding:10px;
    border-radius:10px;
}

iframe {
    width:100%;
}

.photo-wrapper {
    display: flex;
    padding: 5px;
}

.photo {
    margin: 5px;
}

.photo-text {
    text-align: center;
}

.copy {
    text-align: center;
}

/*モバイルサイズ
-------------------------------------*/

@media (max-width:750px){

/* 共通 モバイル
-------------------------------------*/


h1 a {
    font-size: 2rem;
}

h2 {
    font-size: 1.2rem;
}

.rakuten_banner{
    display:block;
}

.rakuten_banner-a {
    width: 100%;
}

.top a {
    display:block;
    background-color: #cafed6e9;
    margin: 0 5px;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
}
/* index.html モバイル
-------------------------------------*/    

main {
    padding-right: 8px;
}

section {
    text-align: center; 
    margin-bottom: 10px;
    padding-right: 8px;
}

.grid {
    gap: 0.5rem 0.5rem;
    grid-template-columns: repeat(2, 1fr);
}

}