@charset "UTF-8";

body {
  		/* 方眼紙模様に必須のスタイル */
  		background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
                  		  linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
  		background-size: 16px 16px;
 		background-repeat: repeat;
 		background-position: center center;

 		 /* 以下任意のスタイル */
  		padding: 20px;
		}
	
	
html, body{
					height:100%
					margin:0;
					padding:0;
					font-family: "Sawarabi Gothic", sans-serif;
                    font-weight: 400;
                    font-style: normal;
				}
	
.container {
    		display: flex;
    		align-items: flex-start;
    		justify-content: center;
    		gap: 10px;            /* 文章との距離 */
    		margin: 50px 10px 90px 10px;
    		align-items: flex-start;
			}

.character {
    		width:30%;         /* PC時の最大幅 */
    		max-width:380px;       /* 画面が狭いときは縮む */
    		aspect-ratio: 1/1;    /* 正方形キープ */
    		object-fit: contain;  /* 画像が潰れない */
    		flex-shrink: 0;       /* ←★縮んでも位置が動かない */
			}

.sentence{
			width:80%;
			margin-left:40px;
}
				
.fusen{
				width:50%;
				height:auto;
			}
			
@media screen and (max-width:1050px){
.sentence{
			margin-left:10px;
			}

.fusen{
		width:70%;
		}
}

@media screen and (max-width:870px) {

    .container {
    	display:flex;
        flex-direction: column;
        align-items: center;
    }
    
     .character {
        order: 1;
        width: 60%;
        max-width: 300px;
        margin:0 auto;
    }
    
    .sentence{
    	width:98%;
    	
    }
    
    .fusen {
        order: 2;
        width: 75%;
        margin: 0 auto;
        display: block;
    }

    /* sentence 全体にも flex を適用する */
    .sentence {
    	order:1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media screen and (max-width:480px){
.container{
            margin-top:-10px;
            }

.fusen{
		width:87%;
		}
}

.sentence p{
			font-size:20px;
			line-height:1.9;
			margin:20px 70px 20px 30px;
			}
			
@media screen and (max-width:870px) {		
.sentence p {
        order: 3;
        margin:30px 20px 30px 20px;
    }
}
 @media screen and (max-width:480px){
 .sentence p{
 				font-size:15px;
 				margin:30px 10px;
 			}
 	
 }
 
			
.btn_06 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40%;
  max-width:500px;
  /*min-width:160px;*/
  height: 65px;
  box-sizing: border-box;
  background: repeating-linear-gradient(45deg, #ffffff, #ffffff 3px, #e7e7e7 3px, #e7e7e7 30px);
  color: #333;
  font-size: 90%;
  letter-spacing: 0.1em;
  text-decoration: none;
  position: relative;
  margin:60px auto 25px auto;
}

.btn_06 span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 65px;
  background: #fff;
  border: 1px solid #000;
  box-sizing: border-box;
  position: absolute;
  top: -6px;
  left: -6px;
  transition-duration: 0.2s;
}
.btn_06:hover span {
  left: -1px;
  top: -1px;
}

.btn_06:nth-of-type(2) {
    margin-bottom:90px;
}