PCとスマホの表示について

はじめまして。閲覧ありがとうございます。
検索したところ同じような現象の方を見つけることができませんでしたのでスレ立て失礼致します。
（もし被っていたら申し訳ありません）

通常PCで作業、スマートフォンで閲覧しているのですが、PC上では綺麗に表示されますがスマホ上ではくずれて表示されます。

1枚目がPC、2枚目がスマホでの閲覧したページです。
HEADとBODYは追記します。

もし原因がお分かりになる方がいらっしゃいましたらご教授願います。
よろしくお願い致します。

634×571JPG

27KB

750×1114JPEG

77KB

>>5
解決済みの件に嘴を挟んでしまいまして大変失礼いたしました……！
にもかかわらず丁寧なご返信までいただきまして、真にありがとうございます。
解決されていて良かったです！今回は重ね重ね失礼いたしましたm(_ _)m

>>4
コメントありがとうございます。
言葉足らずでお手数をお掛けし大変申し訳ありません。
また、分かりやすいご解説感謝致します。

@media screen and (min-width: 601px)
@media only screen and (max-width: 600px)

上記を記載して、PC、スマートフォン共に崩れなく表示できております。
またなにか困ったことがありましたらスレ立て致しますので、お力添えいただけますと幸いです。

>>3
> @media screen and (max-width: 500px)
にしてしまうと、ウィンドウサイズが501〜600pxのとき一部のCSSが反映されなくなってしまいます……。

*@media screen and (min-width: 601px){●●}
→ウィンドウ横幅が最小でも601pxあるとき（＝横幅601px以上のとき）、●●というスタイルを適用
*@media screen and (max-width: 500px){★★}
→ウィンドウ横幅が最大でも500pxまでのとき（＝横幅500px以下のとき）、★★というスタイルを適用
>>>>どっちの条件にも当てはまらない、横幅501px以上・600px以下のウィンドウでは●●も★★も適用されない
見た感じ、501px〜600px用のスタイル指定はないので、そのサイズのブラウザで閲覧するとデザイン崩れが起こるかと……。

そもそもデザイン崩れの原因は、>>1を見る限り、メディアクエリの } が一つ足りないせいだと思います。
（@media screen and (min-width: 601px){……の閉じカッコが無いので、それ以降のスタイルが「横幅が601px以上のとき」にしか適用されないという状態）
なので>>2しか書き換えていないのならば、解決していないはずなんですが……。
直っているのならよいのですが……本当にそこしか書き換えていないのならば直っているはずはないかと……。
他のところも正しく書き換えられていて、すでに解決済みでしたら申し訳ありません。

連投恐れ入ります。
自己解決しました。

HEAD内
@media screen and (max-width: 500px)
上記数値を600→500にしたところ治りました。

【表紙デザイン】


<div class="bk"></div><header><div class="top"></div>
<br><br><br>
<h1>50,000anniversary</h1><br>
<form action="https://alicex.jp/nrclepsy/novel/7/" method="post"><input type="text" name="DreamID[2]" value="#2#"><input type="text" name="DreamID[1]" value="#1#"> <input type="submit" name="dream_name_set" value="ok" /> </form></header>
<div class="wrp">
<div class="wrp2">

<div class="act">
<a href="https://alicex.jp/nrclepsy/novel/7/1/">
<h2>タイトル</h2></a>
<div class="box">
<div class="menu"><a href="" class="link">名前様</a></div><br>
リクエスト内容<br>
</div>
</div>

<div class="act">
<a href="https://alicex.jp/nrclepsy/novel/7/2/">
<h2>タイトル</h2></a>
<div class="box">
<div class="menu"><a href="" class="link">とくめい様</a></div><br>
リクエスト内容<br>
</div>
</div>

<div class="act">
<a href="https://alicex.jp/nrclepsy/novel/7/3/">
<h2>タイトル</h2></a>
<div class="box">
<div class="menu"><a href="" class="link">名前様</a></div><br>
リクエスト内容<br>
</div>
</div>

<div class="act">
<a href="https://alicex.jp/nrclepsy/novel/7/4/">
<h2>タイトル</h2></a>
<div class="box">
<div class="menu"><a href="" class="link">名前様</a></div><br>
リクエスト内容<br>
</div>
</div>
</div>

<br>


</div>
</div>

<br>

【HEAD欄】



<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Marcellus');

@font-face
{
font-family: 戸越明朝;
src: url('https://cdn.leafscape.be/togoshi/togoshi-mincho_web.woff')
format("woff");
}

body{
font-family:"Marcellus","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#555;
background:#fff;
margin:0;
padding:0 0 10px;
counter-reset:number 0;}

body:before,body:after{
background:#dcd3b2;
content:"";
display:block;}

body:before{
width:5px;
top:0;
bottom:0;
left:0;}

body:after{
width:5px;
top:0;
right:0;
bottom:0;}

@media screen and (min-width: 601px){
.wrp{
width:600px;
margin:0 auto;}

.wrp2{
margin:0 auto 20px;
display:flex;
flex-direction:row;
flex-wrap:wrap;}

.act{
width:250px;
display:inline-block;
margin:10px auto;
}

@media screen and (max-width: 600px){
.wrp{
width:100%;
margin:0 auto;}

.wrp2{margin:0 auto 20px;}

.act{margin:10px 25px;}
}

.wrp2 a,.wrp2 a:hover{
display:block;
margin:0 auto;
padding:0;}

.act{
border:solid 2px #f5f5dc;
padding:10px;}

.act:hover{
transition:0.5s;
border:solid 2px #e597b2;
box-shadow:0 0 3px #e597b2;
opacity:.5;}

.top{
background:url(##IMAGE_DATA_3_URL##);
background-size:cover;
margin:10px auto 20px;
width:80px;
height:100px;
border-radius:50%;
border:solid 1px #fff;
box-shadow:0 0 0 2px #765c47;
}

.top:before {
content:"";
display:block;
width:80px;
height:100px;
border-radius:50%;
margin:0 auto;
background:rgba(255,255,224,.6);}

.icn{
background:url(##IMAGE_DATA_3_URL##);
background-size:30px;
width:10px;
height:10px;
border:solid 1px #fff;
box-shadow:0 0 0 1px #765c47;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
display:inline-block;}

.icn:before {
content:"";
display:block;
width:10px;
height:10px;
background:rgba(255,255,224,.6);}

.box{
color:#888;}

.text{
line-height:200%;
font-size:13px;
padding:30px 0 10px;
margin:20px;
text-align:left;}

.text p{
line-height:150%;
color:#888;
border-top:double 3px #765c47;
border-bottom:double 3px #765c47;
margin:10px;
padding:10px;
font-size:10px;
}

header{
text-align:center;
margin:20px;
padding:30px 0 10px;}

h1{
font-family:Marcellus,戸越明朝,sans-serif;
line-height:100%;
font-size:18px;
font-weight:normal;
color:#333;
background:rgba(255,255,255,.8);
margin:-75px auto 20px;
padding:10px 20px;
text-align:center;
border-top:solid 1px #333;
border-bottom:solid 1px #333;
display:inline-block;}

h2{
font-family:Marcellus,戸越明朝,sans-serif;
color:#333;
font-weight:normal;
font-size:14px;
margin:0
padding:0;}

h2:before{
counter-increment:number 1;
content:counter(number) ". ";
}

a{
color:#6b6b6b;}

a:hover{
color:#e597b2;
text-shadow:0 0 3px #e597b2;
}

input[type],textarea{
height:50px;
width:80%;
font-family:"Marcellus","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:#fff;
color:#333;
border:solid 1px #765c47;
margin:5px 10px;
padding:2px 5px;
-webkit-appearance: none;
box-shadow:none;
border-radius:0;
}

input[type=text]{
border-top:none;
border-right:none;
border-bottom:solid 1px #765c47;
border-left:none;
text-align:center;
margin:5px;
height:24px;
width:60px;}

input[type=submit]{
margin:5px;
height:auto;
width:50px;
cursor:pointer;
text-shadow:none;
border:solid 1px #765c47;
background:#fff;
color:#333;
font-weight:normal;
}

input{border:none; background:none; text-align:center; padding:5px;}
.name input{font-size:12px;}
.name input[type=text]{width:70px; border:#eee 1px solid; margin-right:10px;}
input[type=submit]{width:auto; color:#000; background-color:#888; background:url(画像) center;}

.menu a{
background:url(画像);
text-align:center;
max-width:65px;
border-radius:5px;
padding:0;
margin:0;
position: absolute;
text-decoration: none;
}

</style>