@charset "utf-8";/*summaryとかh3とかwidthが狭いせいで文字を小さくしないといけない状況になっている→widthを広げて文字サイズも大きいままキープできるようにしてみる。*/
/*%が多いのでremに変える(全部変える必要はなく、必要に応じて適宜%を使う)*/
html,body{
    min-height: 100%;
    margin:0;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
    overflow-x: clip;
}

.bg{
  position: absolute;
  inset: 0;
  transition: opacity 1s ease;
  z-index: -1;
}

/*ラジオボタンここから*/
.controls{
    position: absolute;
    left: 3%;
    top:7rem;/*画面幅に合わせてもう少し細かく設定すると見やすくなるかも。*/
}
/*ラジオボタンここまで*/

.controls label,.controls input{
        cursor: pointer;
}

/*bodyカラーここから*/
body.simple {
  background: #fff;
  animation: none;
}

/*パステルコラージュここから*/
body.pastel{
  background: linear-gradient(120deg, #fffab9, #ffe4f1, #ceffce, #fffab9, #ffe4f1, #ceffce);/* #fff9a0, #ffc9e4, #b5ffb5*/
  background-size: 300% 300%;
  animation: bgMove 30s linear infinite;
}

@keyframes bgMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

canvas{
    position: fixed;
    top:0;
    left:0;
    z-index: -1;
}

/*ユニコーン*/
body.unicorn {
  background: #b5ffb5; /* 黄緑 */
  animation: none;
}

/* 阿〇寛 */
body.hiroshi {
  min-height: 100vh;
  background-image: url(../img/阿部寛風背景2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
/*bodyカラーここまで*/

.home{
    position: relative;
    left: 4rem;
    bottom:5rem;
    width:6%;
}

.home a{
    text-decoration: none;
    color: #000;
}

/*大見出し*/
h1{
	text-align: center;
	position: relative;
	top:4rem;
}

/*HOME*/
h2{
    text-align: center;
}

/*小見出し*/
h3{
    text-align: center;
    font-size:2.5rem;
}

.anime-grid,.car,.movie-grid,.words-grid{
    text-align: center;
}

.first{
    text-align: center;
    font-size:0.5rem;
    position: relative;
    bottom:3.5rem;
}

/*全体の調整ここから*/
.like{
    display: block;
    gap:1px;
    align-items: flex-start;
    justify-content: center;
    /*padding-bottom: 50px;*/
}


.column{
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  gap: 30px;
}

body.hiroshi .anime-grid details,body.hiroshi .movie-grid details,body.hiroshi .words-grid details{
    background-color: #fff;
}

.detail{
    /*flex:0.3;
    height: 250px;*/
    padding: 10px;
    height: auto;
}

/*.anime{}.car{}.movie{}.words{}*/

details{
    width: 100%;
}

details p{
    /*width: 110%;*/
    font-size:1.7rem;
    line-height: 2;
    margin: 0 auto;
    /*position: relative;*/
    padding: 20px;
    right:1.5rem;

    /*background-color: #fff;*/
}

summary{
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 15px 15px 25px;
    position: relative;
    font-size:1.7rem;
}

/* ▶ */
summary::before {
  content: "▶";
  position: absolute;
  left: 5%;
}

/* 開いたとき ▼ */
details[open] summary::before {
  content: "▼";
}

.car summary::before{
position: relative;
left: -1%;
}

.detail details p {
margin: 0.8rem 0 0;
padding: 0.8rem;
border-radius: 8px;
line-height: 1.7;
}
/*全体の調整ここまで*/

/*animeここから*/
.anime-grid {
display: grid;
width: 90%;
max-width: 1600px;
margin: 0 auto;

grid-template-columns:1fr;
row-gap: 70px;
align-items: start;
}

/* カード全体 */
.anime-grid details {/*1200pxから1段にする*/
width: 70%;
box-sizing: border-box;
border: 2px solid #aaa;
border-radius: 15px;
overflow: hidden;
transition: all 0.3s ease;

margin: 0 auto;
}

/* タイトル部分 */
.anime-grid summary {
padding: 15px;
cursor: pointer;
list-style: none;
}

.works{
    font-size: 1.4rem;
}
/*animeここまで*/

/*car*/
/*movieここから*/
.movie-grid {
display: grid;
width: 90%;
max-width: 1600px;
margin: 0 auto;

grid-template-columns: 1fr;
row-gap: 70px;
align-items: start;
}

/* カード全体 */
.movie-grid details {/*1200pxから1段にする*/
width: 70%;
box-sizing: border-box;
border: 2px solid #aaa;
border-radius: 15px;
overflow: hidden;
transition: all 0.3s ease;

margin: 0 auto;
}

/* タイトル部分 */
.movie-grid summary {
padding: 15px;
cursor: pointer;
list-style: none;
}
/*movieここまで*/


/*wordsここから*/
.words-grid {
display: grid;
width: 90%;
max-width: 1600px;
margin: 0 auto;

grid-template-columns: 1fr;
row-gap: 70px;
align-items: start;
}

/*カード全体 */
.words-grid details {/*1200pxから1段にする*/
width: 70%;
box-sizing: border-box;
border: 2px solid #aaa;
border-radius: 15px;
overflow: hidden;
transition: all 0.3s ease;

margin: 0 auto;
}

/*タイトル部分 */
.words-grid summary {
padding: 15px;
cursor: pointer;
list-style: none;
}
/*wordsここまで*/

/*矢印ここから*/
.top{
	opacity: 0;
	position: fixed;
	left: 90%;
	bottom:2%;
	background: transparent;
	cursor: pointer;
	visibility: hidden;
}

.top img{
	width: 3.5rem;
}

.top.is-active{
	opacity: 1;
	background: none;
	border: none;
	pointer-events: auto;
	visibility: visible;

	z-index: 1000;
}

.top.is-active img{
	opacity: 1;
}
/*矢印ここまで*/

footer{
    text-align: center;
    position: relative;
    top:15rem;
}
/*{border:solid 1px;}*/



/*セリフの改行*/
.eureka{
    display: none;
}

.eg8{
    display: none;
}
@media (max-width:1600px){
    .eureka{
        display: block;
    }
}
@media (max-width:1200px){
    h3{
        font-size: 2.3rem;
    }

    
	
	.home{
		left:3.5rem;
	}

    

    details p {
        width: 90%;
        padding: 1rem;
        border-radius: 8px;
        line-height: 1.7;
    }

/*details p{
        width: 120%;
        position:relative;
        right: 2.6rem;
        font-size: 1.5rem;
        right: 0rem;
    }*/
}
@media (max-width:1000px){
    h3{
        font-size:2.09rem;
    }

    summary{
        font-size: 1.4rem;
    }
    details p{
        font-size:1.3rem
    }
}
@media (max-width:900px){
    h3{
        font-size:1.95rem;
    }
}

@media (max-width:850px){/*detailのwidthを調整して狭くする。*/
    .column{
        margin: 0 auto;
    }

    .detail{
        height: auto;
    }

    details p {
        width: 90%;
        padding: 1rem;
        border-radius: 8px;
        line-height: 1.7;
    }

    .eg8{
        display: block;
    }

    .home{
        position: relative;
        left: 3rem;
        bottom:5rem;
        width:10%;
    }

    .anime-grid,.movie-grid,.words-grid{
        width: 120%;
        margin-left: -10%;
        
    }
    }
    


@media (max-width:650px){/*details pのwidthが若干右に寄っているような気がする。*/
    .home{/*HOMEの位置がキモいので要検討*/
    position: relative;
	left:5.5%;
    bottom:0.5rem;
    z-index: 1;
}
    .controls{
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    left:50%;
    width: 300px;
    transform: translateX(-47%);

    
    /*画面幅に合わせてもう少し細かく設定すると見やすくなるかも。*/
}
    .controls label{
        display: flex;
        position: relative;
        width:50%;
        top: 3.5rem;
        box-sizing: border-box;
    }

    .controls input[type="radio"]{
        margin-right: 6px;
        margin-top: 2px; /* 微調整 */
    }
    
    

    .anime-grid p,.movie-grid p,.words-grid p{
        font-size: 1rem;
    }
}

@media (max-width:530px){
    summary{
        font-size: 1.2rem;
    }
}

@media (max-width:460px){
    summary{
        font-size: 1rem;
    }
}

@media (max-width:390px){
    summary{
        font-size: 0.8rem;
    }
}

@media (max-width:335px){
    h1{
        font-size: 1.5rem;
    }
}