/* ※新たな記事を載せる時に、その記事に合わせたクラス名を設定しましょう　TOPページ全3カ所※ */

/* 全ページに適用 -html- */
html {
    font-size: 3.2vw;
    font-family: sans-serif;
    scroll-behavior: smooth;
    max-width: 100%;
}
* {
    box-sizing: border-box;
    /*outline: solid 2px blue;*/
}
body {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background-color: #e3edf9;
}
p, li, td {
    line-height: 1.7;
}
a:link,a button:link {
    color: #253958;
    text-decoration: none;
    cursor: pointer;
}
a:visited,a button:visited {
    color: #253958;
    text-decoration: none;
    cursor: pointer;
}
a:hover,a button:hover {
    color: #253958;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.5;
}
a:active,a button:active {
    color: #253958;
    text-decoration: none;
    cursor: pointer;
}
img {
    max-width: 100%;
}
span img {
    max-width: 8vw;
    max-height: 8vw;
}
.wrapper {
    width: 92vw;  
    margin: 0 4vw 0 4vw;
}
h1 {
   font-size: 4vw;
   color: #2c0253b0;
   margin: 0 0 0 0;
   width: 65vw;
}
h1 span {
    font-size: 3vw;
}
h2 {
    font-size: 3.5vw;
}
h3 {
    font-size: 3.2vw;
}
h4 {
    font-size: 2.2vw;
}

/* 全ページに適用 -header- */
.header {
    padding-top: 1vw;
    background-color: #f9f8f4;
}
.logo {
    width: 100%;
    height: 12vw;
}
.logo img {
    width: 25vw;
}
.logo h1 {
    text-align: left;
    position: relative;
    top: -12vw;
    left: 30vw;
}
.logo h4 {
    width: 30vw;
    font-size: 1.5vw;
    margin: 0;
    position: relative;
    left: 5vw;
}
.nav ul {
    display: flex;
    justify-content: center;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    width: 100%;
    gap: 1vw;
    flex-wrap: wrap;
}
.nav li {
    display: block;
    width: 45vw;
    height: 12.5vw;
    line-height: 1.1;
    list-style: none;
}
.nav li a {
    display: flex;
    width: 45vw;
    height: 12.5vw;
    line-height: 1.1;
    gap: 1vw;
    font-size: 3vw;
    font-weight: 700;
    align-items: center;
    color: #fff;
    background-color: #5983b0;
    text-indent: 1em;
    border-radius: 1vw;
}
.nav li a button {
    display: flex;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    width: 45vw;
    height: 12.5vw;
    gap: 1vw;
    font-size: 3vw;
    font-weight: 700;
    align-items: center;
    color: #fff;
    border: hidden;
    background-color: #5983b0;
    text-indent: 1em;
    border-radius: 1vw;
}

.nav a:link {
    color: #fff;
}
.nav a:hover {
    text-decoration: none;
}
.nav a:active {
    text-decoration: none;
}

/* 全ページに適用 -main- */
main {
    margin: 5vw auto 5vw auto;
    max-width: 1000px;
}
main h2 {
    margin: 5vw 0 0 0;
    color: #253958;
    font-size: 3vw
}
main h3 {
    margin: 0.5vw 0 0.5vw 0;
    color: #253958;
    font-size: 3vw
}
main h4 {
    margin: 0.5vw 0 0.5vw 0;
    color: #253958;
    font-size: 2.5vw
}

/* 全ページに適用 -aside- */
aside h2 {
    margin: 5vw 0 0 0;
    color: #253958;
    font-size: 3vw;
    text-align: center;
}
aside h3 {
    margin: 0.5vw 0 0.5vw 0;
    color: #253958;
    font-size: 3vw
}
aside h4 {
    margin: 0.5vw 0 0.5vw 0;
    color: #253958;
    font-size: 2.5vw
}
aside .side_content {
    padding-left: 5vw;
    padding-right: 5vw;
}
aside .side_content_title {
    display: block;
    width: 92vw;
    height: 10vw;
    background-color: #b4c7dc;
    border-radius: 1vw;
}
aside .side_new_articles .side_content_title a h2,aside .archive .side_content_title a h2,aside .side_recommend .side_content_title a h2,aside .archive .side_content_title a h2,aside .side_content_title h2 {
    margin-top: 1vw;
    line-height: 10vw;
}
aside .side_new_articles {
    display: none;
}
aside .author {
    display: flex;
    width: 92vw;
    justify-content: center;
    align-items: center;
    gap: 10vw;
    background-color: #FFFFFF;
    border-radius: 1vw;
    margin-top: 1vw;
}
aside .author img {
    width: 15vw;
    height: 15vw;
}
aside .author_text {
    display: block;
    width: 50vw;
}
aside .side_content_title h2,aside .archive .side_content_title a h2 {
   text-align: center;
}
aside .archive a span img,aside .side_recommend a span img {
    transform: translate(0, 25%);
}
aside .ranking a span img {
    transform: translate(0, 50%);
}
aside .side_recommend {
    display: none;
}
aside .ranking a {
    display: flex;
}
aside .ranking {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1vw;
    margin-top: 1vw;
}
aside .ranking .ranking_1,.ranking_2,.ranking_3,.ranking_4,.ranking_5,.ranking_6 {
    width: 45vw;
    background-color: #FFFFFF;
    border-radius: 1vw;
}
aside .ranking span img {
    max-width: 6vw;
    max-height: 6vw;
}
aside .side_content {
    text-indent: 2vw;
    background-color: #FFFFFF;
    border-radius: 1vw;
    margin-top: 1vw;
    padding-bottom: 2vw;
}
aside .side_content h2 {
    text-align: left;
}
aside .side_content li {
    list-style: none;
}
aside .side_content a button {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: none;
    font-size: 3vw;
    color: #253958;
    background-color: unset;
}

/* 全ページに適用 -アフェリエイト広告リンク- */
aside .side_affiliate_links .pr p {
    display: block;
    text-align: center;
}
aside .side_affiliate_links {
    display: block;
    margin: 5vw;
    text-align: center;
}
aside .side_affiliate_links_1,aside .side_affiliate_links_2,aside .side_affiliate_links_3,aside .side_affiliate_links_4 {
    margin-bottom: 5vw;
}

/* 全ページに適用 -マウスホバー時、兄弟要素の透過率設定- */
.new_articles_1:hover > a,.new_articles_2:hover > a,.new_articles_3:hover > a,.new_articles_4:hover > a {
    opacity: 0.5;
}
.new_articles_1:hover > a:hover,.new_articles_2:hover > a:hover,.new_articles_3:hover > a:hover,.new_articles_4:hover > a:hover {
    opacity: 0.5;
}
.recommend_1:hover > a,.recommend_2:hover > a,.recommend_3:hover > a,.recommend_4:hover > a {
    opacity: 0.5;
}
.recommend_1:hover > a:hover,.recommend_2:hover > a:hover,.recommend_3:hover > a:hover,.recommend_4:hover > a:hover {
    opacity: 0.5;
}
.ranking_1:hover > a,.ranking_2:hover > a,.ranking_3:hover > a,.ranking_4:hover > a,.ranking_5:hover > a,.ranking_6:hover > a {
    opacity: 0.5;
}
.ranking_1:hover > a:hover,.ranking_2:hover > a:hover,.ranking_3:hover > a:hover,.ranking_4:hover > a:hover,.ranking_5:hover > a:hover,.ranking_6:hover > a:hover {
    opacity: 0.5;
}

/* 全ページに適用 -footer- */
footer {
    background-color: #DBDBDB;
    padding: 1vw 0 0 0;
    margin: 5vw 0 0 0;
}
.footer_nav_sp {
    display: flex;
    justify-content: center;
}
.footer_nav_sp_1,.footer_nav_sp_2 {
    padding: 0 5vw 0 5vw;
}
.footer_nav_sp_1 li,.footer_nav_sp_2 li {
    list-style: none;
    line-height: 2.5;
}
.footer_nav_sp_2 li a button {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: none;
    font-size: 3vw;
    color: #253958;
    background-color: #DBDBDB;
}
.sns_flex {
    display: flex;
    justify-content: center;
}
.portfolio {
    text-align: left;
    padding-left: 6vw;
}
.sns_link {
    display: flex;
    padding: 0 0 0 0;
    gap: 5vw;
}
.sns_flex li {
    list-style: none;
}
.copyright {
    margin-top: 1vw;
    margin-bottom: 0;
    padding-top: 1vw;
    padding-bottom: 1vw;  
    color: #253958;
    text-align: center;
}

/* 全ページに適用 -.pagetop- */
.pagetop {
    height: 12.5vw;
    width: 12.5vw;
    position: fixed;
    right: 7.5vw;
    bottom: 20vw;
    background: #fff;
    border: solid 0.13vw #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    opacity: 0.3;
}
.pagetop_arrow {
    height: 5vw;
    width: 5vw;
    border-top: 0.75vw solid #000;
    border-right: 0.75vw solid #000;
    transform: translateY(20%) rotate(-45deg);
}

/* トップページに適用 -.mainvisual- */
.mainvisual {
    padding: 0 0 0 0;
    text-align: center;
    background-color: #f9f8f4;
}
.mainvisual img {
    position: relative;
    top: 1vw;
}
.renewal_date {
    text-align: right;
    font-size: 1.5vw;
    padding-bottom: 1.5vw;
}

/* トップページに適用 -.contents_nav- */
.contents_nav ul {
    display: flex;
    padding: 0 0 0 0;
    margin-bottom: 1vw;
    list-style: none;
    justify-content: center;
    gap: 1vw;
}
#contents_nav_recommend {
    display: flex;
    justify-content: center;
    padding: 0 0 0 0;
    width: 45vw;
    height: 15vw;
    gap: 2vw;
    font-size: 3vw;
    align-items: center;
    color: #253958;
    border: hidden;
    background-color: #dde8cb;
    border-radius: 1vw;
}
#contents_nav_new_articles {
    display: flex;
    justify-content: center;
    padding: 0 0 0 0;
    width: 45vw;
    height: 15vw;
    gap: 2vw;
    font-size: 3vw;
    align-items: center;
    color: #253958;
    border: hidden;
    background-color: #dedce6;
    border-radius: 1vw;
}
.contents_nav img {
    max-width: 6vw;
    max-height: 6vw;
}

/* トップページに適用 -#recommend,#new_articles- */
main .recommend,main .new_articles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1vw;
}
main .recommend .recommend_1,main .recommend .recommend_2,main .recommend .recommend_3,main .recommend .recommend_4,main .new_articles .new_articles_1,main .new_articles .new_articles_2,main .new_articles .new_articles_3,main .new_articles .new_articles_4 {
    width: 45vw;
    background-color: #f3fbea;
    border-radius: 1vw;
}
main .recommend span img,main .new_articles span img {
    max-width: 6vw;
    max-height: 6vw;
}
#new_articles {
    display: none;
}

/* トップページに適用 -.main_content_title- */
.main_content_title {
    display: block;
    padding: 0 0 0 0;
    margin: auto;
    width: 91vw;
    height: 15vw;
    background-color: #b4c7dc;
    border-radius: 1vw;
}
.main_content_title h2 {
    text-align: center;
    line-height: 15vw;
}

/* トップページに適用 -.main_content- */
.main_content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1vw;
    margin-top: 1vw;
}
.main_content_article {
    width: 45vw;
    background-color: #ffffff;
    border-radius: 1vw;
}
.empty {
    width: 45vw;
}
.main_content span img {
    max-width: 6vw;
    max-height: 6vw;
}
aside span img {
    max-width: 6vw;
    max-height: 6vw;
}
h2 span img {
    transform: translate(0, 25%);
}
main .top_new_articles_new_img {
    width: 3vw;
    padding-left: 0;
}

/* トップページに適用 -マウスホバー時、兄弟要素の透過率設定- */
.main_content_article:hover > a {
    opacity: 0.5;
}
.main_content_article:hover > a:hover {
    opacity: 0.5;
}

/* 個別のスタイル */
/* privacy_policy.html */
.privacy_policy {
    background-color: #ffffff;
    border-radius: 1vw;
    padding: 0 5vw 3vw 5vw;
}
.privacy_policy_title {
    text-align: center;
    font-size: 5vw;
}
.privacy_policy h4 span span span img {
    width: 2vw;
    transform: translate(0, 25%);
}
.privacy_policy li {
    list-style: none;
}

/* contact.html */
.contact {
    background-color: #ffffff;
    border-radius: 1vw;
    padding-bottom: 3vw;
}
.contact_title {
    text-align: center;
    font-size: 5vw;
}
.contact h4 span span span img {
    width: 2vw;
    transform: translate(0, 25%);
}
.contact .form_contact .form_table {
    width: auto;
    display: block;
    border-collapse: collapse;
    margin: auto 1vw 10vw 1vw;
}
.contact .form_contact .form_table th,.contact .form_contact .form_table td {
    font-size: 4.3vw;
    border: 0.25vw solid black;
	padding: 2.5vw;
    display: block;
}
.contact .form_contact .form_table th {
    width: auto;
	font-weight: normal;
	text-align: left;
    margin-top: 1.25vw;
}
.contact .form_contact .form_table th span {
    font-size: 2.75vw;
}
.contact .form_contact .form_table th span span {
    display: none;
}
.contact .form_contact .form_table td {
    background: #efefef;
}
form input[type="text"], form textarea {
    width: 85vw;
    border: unset;
    padding: 1vw;
    display: block;
    margin: auto;
    outline: none;
     font-size: 4vw;
    background-color: #efefef;
}
form input[type="submit"], form input[type="reset"], form input[type="button"] {
    display: block;
    width: 75vw;
    padding: 2.5vw;
    margin: auto;
    font-size: 4.5vw;
    font-weight: bold;
    color: #efefef;
    background-color: #2c0253b0;
}
form input[type="submit"]:hover, form input[type="reset"]:hover, form input[type="button"]:hover {
    color: #e03131;
}

/* contactmail.php */
.header_contact {
    width: 100%;
    min-height: 10vw;
    background-color: #f9f8f4;
    padding: 5vw 10vw;
    margin-bottom: 5vw;
}
.wrapper_contact {
    margin: 0 0 0 0;
}
.contact_title {
	text-align: center;
}
.form_wrapper {
	width: 95%;
    background-color: #ffffff;
    border-radius: 1vw;
	margin: 0 auto;
	color: black;
	line-height: 120%;
	font-size: 3.9vw;
}
h2 {
    font-size: 5vw;
    text-align: center;
}
.form_wrapper h3 {
	font-size: 4.7vw;
	text-align: center;
}
.form_wrapper h4 {
    font-size: 3.5vw;
}
p {
	text-align: left;
	margin: 5vw auto 5vw auto;
}
table.formTable {
	width: 100%;
	margin: 0 auto;
	border-collapse: collapse;
}
table.formTable td,table.formTable th {
	display: block;
	border: 0.25vw solid black;
	padding: 2.5vw;
}
table.formTable th {
	width: 100%;
	font-weight: normal;
	text-align: left;
}
table.formTable td {
	font-weight: normal;
	background: #efefef;
}
span {
	font-size: 3.9vw;
}
p.error_messe {
	margin: 1.25vw 0;
	color: red;
}
#footer .footer_span {
  margin-top: 60vw;
}

/* arcive.html */
.arcive_content {
    display: block;
    padding: 0 4vw 0 4vw;
}
.arcive_content span img {
    max-width: 6vw;
    max-height: 6vw;
    transform: translate(0, 25%);
}
.arcive_content a h3 {
    text-align: left;
    font-size: 3.5vw;
}
.arcive_content ul li {
    text-align: left;
    padding-left: 8vw;
}
.arcive_content ul li a h3 {
    font-size: 2.8vw;
}

/* 各主要記事のスタイル */
.main_article {
    background-color: #ffffff;
    border-radius: 1vw;
    padding: 0 5vw 3vw 5vw;
}
.main_article h4 span span span img {
    width: 2vw;
    transform: translate(0, 25%);
}
.main_article h2 {
    font-size: 4.2vw;
    color: #2c0253b0;
}
.main_article ul {
    padding: 0 2vw 0 2vw;
}
.main_article li {
    list-style: none;
}
.main_article li span {
    font-size: 3.2vw;
    font-weight: bold;
    text-decoration: underline solid 0.5vw #f6a57a;
}
.main_article h3 {
    font-size: 3.2vw;
    text-align: left;
}
.main_article p {
    margin: 0 0 0 0;
    padding: 0 4vw 0 4vw;
}
.main_article p span {
    font-size: 3.2vw;
    font-weight: bold;
    text-decoration: underline solid 0.5vw #f6a57a;
}
.main_article .img_paste {
    width: 100%;
    padding: 0 4vw 0 4vw;
}
.main_article .main_article_table_1 {
    margin: auto;
    border-collapse: collapse;
    margin-left: 5vw;
    margin-right: 5vw;
    border-bottom: 0.25vw solid black;
}
.main_article .main_article_table_1 th,.main_article .main_article_table_1 td {
    width: 42vw;
    text-align: left;
    font-size: 3vw;
    font-weight: normal;
    border-top: 0.25vw solid black;
	padding: 1vw;
}
.main_article .main_article_table_1 th {
    border-left: 0.25vw solid black;
    border-right: 0.25vw solid black;
}
.main_article .main_article_table_1 td {
    border-right: 0.25vw solid black;
}
.main_article .main_article_table_2 {
    margin: auto;
    border-collapse: collapse;
    margin-left: 5vw;
    margin-right: 5vw;
    border-bottom: 0.25vw solid black;
}
.main_article .main_article_table_2 th,.main_article .main_article_table_2 td {
    width: 14vw;
    text-align: left;
    font-size: 3vw;
    font-weight: normal;
    border-top: 0.25vw solid black;
	padding: 1vw;
}
.main_article .main_article_table_2 th {
    border-left: 0.25vw solid black;
    border-right: 0.25vw solid black;
}
.main_article .main_article_table_2 td {
    border-right: 0.25vw solid black;
}
.main_article .main_article_page_link ul {
    display: flex;
    justify-content: space-between;
    padding: 0 4vw 0 4vw;
}
.main_article .main_article_page_link li {
    width: 25vw;
    height: auto;
    border-radius: 1vw;
    background-color: #5983b0;
}
.main_article .main_article_page_link ul li a {
    display: block;
    text-align: center;
    padding-top: 1.5vw;
    padding-bottom: 1.5vw;
    font-weight: bold;
    color: #fff;
}
.main_article .related_article_link {
    display: block;
    width: auto;
    height: auto;
    margin: 0 4vw 0 4vw;
    border-radius: 1vw;
    background-color: #86d68c;
}
.main_article .related_article_link a {
    display: block;
    text-align: center;
    padding-top: 1.5vw;
    padding-bottom: 1.5vw;
    font-weight: bold;
    color: #fff;
}
.main_article .recommend_item_link {
    display: block;
    width: auto;
    height: auto;
    margin: 3vw 4vw 0 4vw;
    border-radius: 1vw;
    background-color:#f6aa38;
}
.main_article .recommend_item_link a {
    display: block;
    text-align: center;
    padding-top: 1.5vw;
    padding-bottom: 1.5vw;
    font-weight: bold;
    color: #fff;
}
.main_article p span span span a {
    font-size: 3.2vw;
    font-weight: initial;
    text-decoration: underline solid 0.5vw #5983b0;
}
.main_article .runnet_banner {
    display: block;
    text-align: center;
}
.main_article .spot_banner p {
    display: block;
    text-align: center;
}
.main_article .spot_banner a {
    display: block;
    text-align: center;
}
.main_article .spot_text_link p {
    display: block;
    text-align: center;
}
.main_article .spot_text_link a {
    display: block;
    text-align: center;
    text-decoration: underline solid 0.5vw #5983b0;
}
/* 目次　新着記事位置を都度設定しましょう */
.side_content_new_img {
    width: 10vw;
    position: relative;
    top: -62vw;
    left: 0.5vw;
}

/* レスポンシブ対応 メディアクエリ */
@media(min-width: 768px) {
    /* 全ページに適用 -html- */
    html {
        font-size: clamp(13.5px, 1.5vw, 29px);
    }
    span img {
        max-width: clamp(200px, 7vw, 500px);
        max-height: clamp(25px, 7vw, 75px);
    }
    .wrapper {
        width: calc(100% - 20px);
        margin: 0 clamp(10px, calc(50% - 975px), calc(50% - 975px)) 0 clamp(10px, calc(50% - 975px), calc(50% - 975px));
    }
    h1 {
        font-size: clamp(1.6rem, 3vw, 3rem);
        margin: 0 0 0 0;
        width: clamp(450px, 65vw, 1248px);
    }
    h1 span {
        font-size: clamp(1.2rem, 2.3vw, 2.3rem);
    }
    h2 {
        font-size: 1.1rem;
    }
    h3 {
        font-size: 0.9rem;
    }
    h4 {
        font-size: 0.7rem;
    }
    #container {
        display: flex;
    }

    /* 全ページに適用 -header- */
    .header {
        padding-top: 20px;
    }
    .logo {
        height: clamp(30px, 10vw, 250px);
    }
    .logo img {
        width: clamp(200px, 25vw, 500px);
        position: relative;
        left: clamp(0px, calc(50% - 960px), calc(50% - 960px)); /*clamp(最小値, 推奨値, 最大値);*/
    }
    .logo h1 {
        top: clamp(-210px, -11vw, -100px);
        left: 31vw
    }
    .logo h4 {
        font-size: clamp(0.5rem, 1vw, 1vw);
        position: relative;
        left: clamp(5vw, calc(50vw - 900px), calc(50vw - 900px)); ;
    }
    .nav ul {
        width: clamp(748px, 96vw, 1900px);
        margin: auto;
        gap: 5px;
    }
    .nav li {
        width: clamp(240px, 30vw, 630px);
        height: clamp(15px, 8vw, 150px);
    }
    .nav li a {
        width: clamp(240px, 30vw, 630px);
        height: clamp(15px, 8vw, 150px);
        gap: 10px;
        font-size: clamp(16px, 2vw, 48px);
    }
    .nav li a button {
        width: clamp(240px, 30vw, 630px);
        height: clamp(15px, 8vw, 150px);
        gap: 10px;
        font-size: clamp(16px, 2vw, 48px);
    }
    /* 全ページに適用 -main- */
    main {
        margin: 10px 10px 10px 0;
        padding: 0 0 0 0;
        width: clamp(calc(100vw - 290px), calc(75vw - 20px), 1460px);/*clamp(最小値, 推奨値, 最大値);*/
        max-width: 1460px;/*925px*/
    }
    main h2 {
        margin: 10px 0 0 0;
        font-size: clamp(0.9rem, 1.5vw, 1.5vw);
    }
    main h3 {
        margin: 5px 0 5px 0;
        font-size: clamp(0.9rem, 1.5vw, 1.5vw);
    }
    main h4 {
        margin: 5px 0 5px 0;
        font-size: clamp(0.7rem, 1.3vw, 1.3vw);
    }

    /* 全ページに適用 -aside- */
    aside {
        margin: 25px 0 10px 0;
        padding: 0 0 0 10px;
        width: clamp(200px, calc(25vw - 20px),460px);/*clamp(最小値, 推奨値, 最大値);*/
        max-width: 460px;
        border-left: solid 1px #253958;
    }
    aside .side_new_articles,aside .side_recommend {
        display: unset;
    }
    aside .side_new_articles .new_articles_1,aside .side_new_articles .new_articles_2,aside .side_new_articles .new_articles_3,aside .side_new_articles .new_articles_4,aside .archive,aside .side_recommend .recommend_1,aside .side_recommend .recommend_2,aside .side_recommend .recommend_3,aside .side_recommend .recommend_4 {
        width: clamp(190px, calc(25vw - 40px),440px);
        background-color: #FFFFFF;
        border-radius: 0.5vw;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    aside .ranking .ranking_1,.ranking_2,.ranking_3,.ranking_4,.ranking_5,.ranking_6 {
        width: clamp(190px, calc(25vw - 40px),440px);
        background-color: #FFFFFF;
        border-radius: 0.5vw;
        margin-top: calc(5px - 1vw);
    }
    aside .side_new_articles .new_articles_4,aside .side_recommend .recommend_4,aside .ranking .ranking_6 {
        margin-bottom: 5px;
    }
    aside span img {
        max-width: clamp(15px, 1.5vw, 60px);
        max-height: clamp(5px, 1.5vw, 20px);
    }
    aside .side_new_articles .new_articles_new_img {
        width: clamp(36px, 4vw, 76.8px);
        padding-left: clamp(12.6px, 1.4vw, 26.9px);
    }
    aside h2 {
        margin: 5px 0 0 0;
        font-size: clamp(8px, 1.2vw, 24px);
        text-align: left;
        text-indent: 1em;
        line-height: 105%;
    }
    aside h3 {
        margin: 5px 0 0 0;
        line-height: 102%;
        font-size: clamp(6px, 1vw, 20px);
    }
    aside h4 {
        margin: 5px 0 5px 0;
        line-height: 105%;
        font-size: clamp(6px, 1vw, 20px);
    }
    aside p {
        font-size: clamp(9px, 1vw, 19px);
    }
    aside h2 span img {
        transform: translate(0, 20%);
    }
    aside .side_content {
    padding-left: 0;
    padding-right: 0;
    }
    aside .side_content_title {
        width: clamp(190px, calc(25vw - 40px),440px);/*clamp(最小値, 推奨値, 最大値);*/
        height: clamp(15px, 1.8vw, 36px);
        border-radius: clamp(7.5px, 0.9vw, 18px);
    }
    aside .side_new_articles .side_content_title a h2,aside .archive .side_content_title a h2,aside .side_recommend .side_content_title a h2 {
        margin-top: 0;
        line-height: clamp(15px, 1.8vw, 36px);
        font-size: clamp(5px, 0.9vw, 18px);
        transform: translate(0, clamp(-40px, calc(0.9vw - 10px), -1px));
        color: #253958;
    }
    aside .side_content_title h2 {
        margin-top: 0;
        line-height: clamp(15px, 1.8vw, 36px);
        font-size: clamp(5px, 0.9vw, 18px);
        transform: translate(0, clamp(-40px, calc(0.9vw - 10px), -1px));
        color: #253958;
        width: clamp(190px, calc(25vw - 40px),440px);
    }
    aside .side_content_title a h3 {
        text-indent: unset;
    }
    aside .side_new_articles a h3,aside .side_recommend a h3 {
        width: clamp(190px, calc(25vw - 40px),440px);
    }
    aside .side_new_articles h4,aside .side_recommend h4 {
        width: clamp(190px, calc(25vw - 40px),440px);
    }
    aside .side_new_articles img,aside .side_recommend img,aside .ranking img {
        width: clamp(190px, calc(25vw - 40px),440px);
    }
    aside .side_new_articles .side_content_title a,aside .side_recommend .side_content_title a,aside .archive .side_content_title a,aside .side_content_title a {
        display: flex;
        gap: 10px;
    }
    aside .side_new_articles span img,aside .side_recommend span img,aside .ranking span img {
        width: auto;
        height: auto;
    }
    aside .author {
        width: clamp(190px, calc(25vw - 40px),440px);
        gap: 20px;
        margin-top: 5px;
        margin-bottom: 5px;
        border-radius: 0.5vw;
    }
    aside .author img {
        width: clamp(40px, 5vw, 80px);
        height: clamp(40px, 5vw, 80px);
    }
    aside .author_text {
        width: clamp(140px, 25vw, 360px);
    }
    aside .archive {
        margin-bottom: 5px;
    }
    aside .archive .side_content_title a h2 {
        text-align: left;
    }
    aside .side_content_title h2 {
        text-align: left;
    }
    aside .ranking span img {
        max-width: clamp(15px, 1.5vw, 60px);
        max-height: clamp(5px, 1.5vw, 20px);
    }
    aside .side_content {
        text-indent: 10px;
        width: clamp(190px, calc(25vw - 40px),440px);
        border-radius: 0.5vw;
        margin-top: 5px;
        padding-bottom: 10px;
    }
    aside .side_content a button h2 {
        text-indent: calc(1em - 10px);
        font-size: clamp(8px, 1.2vw, 24px);
    }
    aside .side_content a h3 {
        font-size: clamp(5px, 0.9vw, 20px);
    }

    /* 全ページに適用 -アフェリエイト広告リンク- */
    aside .side_affiliate_links {
        margin: clamp(5px, 0.9vw, 20px);
    }
    aside .side_affiliate_links_1,aside .side_affiliate_links_2,aside .side_affiliate_links_3,aside .side_affiliate_links_4 {
        margin-bottom: clamp(5px, 0.9vw, 20px);
    }


    /* 全ページに適用 -footer- */
    footer {
        padding: 20px 0 0 0;
        margin: 10px 0 0 0;
    }
    .footer_nav {
        display: flex;
        justify-content: center;
        gap: clamp(40.5px, 4.5vw, 86.4px);
    }
    .footer_nav_sp_1,.footer_nav_sp_2 {
        padding: 0 40px 0 0;
    }
    .footer_nav_sp_2 {
        padding: 0 40px 0 60px;
    }
    .footer_nav_sp_2 li a button {
        font-size: clamp(13.5px, 1.5vw, 29px);
    }
    .portfolio_link {
        padding-left: 0;
    }
    .portfolio {
        padding-left: 0;
    }
    .sns_flex {
        display: block;
        text-align: left;
    }
    .sns_link {
        margin-top: clamp(9px, 1vw, 19.2px);
        padding-top: 5px;
        /*gap: clamp(40.5px, 4.5vw, 86.4px);*/
        display: block;
    }
    .sns_link li {
        line-height: 2.5;
    }
    .copyright {
        margin-top: 20px;
        padding-top: 20px;
        padding-bottom: 20px;  
    }

    /* 全ページに適用 -.pagetop- */
    .pagetop {
        height: clamp(30px, 4vw, 100px);
        width: clamp(30px, 4vw, 100px);
        right: clamp(20px, 4vw, 100px);
        bottom: clamp(50px, 4vw, 150px);
        border: solid 0.5px #000;
    }
    .pagetop_arrow {
        height: clamp(12px, 2vw, 40px);
        width: clamp(12px, 2vw, 40px);
        border-top: 2px solid #000;
        border-right: 2px solid #000;
    }

    /* トップページに適用 -.mainvisual- */
    .mainvisual .mainvisual img {
        position: relative;
        top: 5px;
    }
    .renewal_date {
        font-size: clamp(9px, 1vw, 19.2px);
        padding-bottom:  clamp(9px, 1vw, 19.2px);
        max-width: 1920px;
    }

    /* トップページに適用 -.contents_nav- */
    .contents_nav ul {
        gap: 5px;
        margin-bottom: 5px;
    }
    #contents_nav_recommend {
        width: clamp(240px, 35vw, 700px);
        height: clamp(15px, 8vw, 150px);
        gap: 5px;
        font-size: clamp(0.9rem, 1.5vw, 1.5vw);
        font-weight: bold;
    }
    #contents_nav_new_articles {
        width: clamp(240px, 35vw, 700px);
        height: clamp(15px, 8vw, 150px);
        gap: 5px;
        font-size: clamp(0.9rem, 1.5vw, 1.5vw);
        font-weight: bold;
        }

    .contents_nav img {
        max-width: clamp(75px, 4vw, 200px);
        max-height: clamp(15px, 4vw, 35px);
    }

    /* トップページに適用 -#recommend,#new_articles- */
    main .recommend,main .new_articles {
        gap: 5px;
    }
    main .recommend .recommend_1,main .recommend .recommend_2,main .recommend .recommend_3,main .recommend .recommend_4,main .new_articles .new_articles_1,main .new_articles .new_articles_2,main .new_articles .new_articles_3,main .new_articles .new_articles_4 {
        width: clamp(240px, 35vw, 700px);
    }
    main .recommend span img,main .new_articles span img {
        max-width: clamp(75px, 4vw, 200px);
        max-height: clamp(15px, 4vw, 35px);
    }

    /* トップページに適用 -.main_content_title- */
    .main_content_title {
        width: clamp(485px, calc(70vw + 5px), 1405px);
        height: clamp(15px, 8vw, 150px);
    }
    .main_content_title h2 {
        line-height: clamp(15px, 8vw, 150px);
    }
    .main_content_title h2 span img {
        max-width: clamp(75px, 4vw, 200px);
        max-height: clamp(15px, 4vw, 35px);
    }

    /* トップページに適用 -.main_content- */
    .main_content {
        gap: 5px;
        margin-top: 5px;
    }
    .main_content_article {
        width: clamp(240px, 35vw, 700px);
    }
    .empty {
        width: clamp(240px, 35vw, 700px);
    }
    .main_content span img {
        max-width: clamp(75px, 4vw, 200px);
        max-height: clamp(15px, 4vw, 35px);
    }
    main .top_new_articles_new_img {
        width: clamp(40.5px, 4.5vw, 88.2px);
        padding-left: clamp(13.5px, 1.5vw, 28.8px);
    }

    /* privacy_policy.html */
    .privacy_policy {
        border-radius: 0.5vw;
        padding: 0 clamp(27px, 3vw 57.6px) clamp(13.5px, 1.5vw, 28.8px) clamp(27px, 3vw 57.6px);
    }
    .privacy_policy_title {
        font-size: clamp(22.5px, 2.5vw, 48px);
    }
    .privacy_policy h4 span span span img {
        width: clamp(11px, 1.22vw, 23.4px);
    }

    /* contact.html */
    .contact {
        border-radius: 0.5vw;
        padding-bottom: clamp(13.5px, 1.5vw, 28.8px);
    }
    .contact_title {
        font-size: clamp(22.5px, 2.5vw, 48px);
        margin-bottom: clamp(18px, 2vw, 38px);
    }
    .contact h4 span span span img {
        width: clamp(11px, 1.22vw, 23.4px);
    }
    .contact .form_contact .form_table {
        display: table;
        width: clamp(470px, 52vw, 1000px);
        margin: auto auto clamp(30px, 3.1vw, 60px) auto;
    }
    .contact .form_contact .form_table th,.contact .form_contact .form_table td {
        font-size: clamp(13px, 1.34vw, 26px);
        border: clamp(0.7px, 0.08vw, 1.5px) solid black;
	    padding: clamp(7px, 0.78vw, 15px);
        display: table-cell;
    }
    .contact .form_contact .form_table th {
        width: 30%;
	    text-align: center;
        margin-top: clamp(12px, 1.25vw, 24px);
    }
    .contact .form_contact .form_table th span {
        font-size: clamp(8px, 0.86vw, 16px);
    }
    .contact .form_contact .form_table th span span {
        display: unset;
    }
    .contact .form_contact .form_table td {
        background: #efefef;
    }
    form input[type="text"], form textarea {
        margin: auto;
        width: 98%;
        display:table;
        padding: clamp(4px, 0.4vw, 8px);
        font-size: clamp(13.5px, 1.5vw, 30px);
    }
    form input[type="submit"], form input[type="reset"], form input[type="button"] {
        margin: auto;
        font-size: clamp(13.5px, 1.5vw, 30px);
        width: clamp(210px, 23.4vw, 450px);
        padding: clamp(7px, 0.78vw, 15px);
    }
    
    /* contactmail.php */
    .header_contact {
        min-height: clamp(30px, 3.1vw, 60px);
        padding: clamp(9px, 1vw, 19.2px) clamp(30px, 3.1vw, 60px) clamp(15px, 1.56vw, 30px) clamp(30px, 3.1vw, 60px);
        margin-bottom: clamp(45px, 2.4vw, 90px);
        background-size: 1920px;
        max-width: 100%;
    }
    .form_wrapper {
	    width: clamp(490px, 54.7vw, 1050px);
	    margin: 0 auto;
        border-radius: 0.5vw;
        padding: clamp(11px, 1.22vw, 23.4px) clamp(22px, 2.44vw, 46.8px) clamp(11px, 1.22vw, 23.4px)clamp(22px, 2.44vw, 46.8px) ;
        font-size: clamp(11px, 1.22vw, 23.4px);
    }
    .form_title h2 {
        font-size: clamp(14px, 1.47vw, 28px);
    }
    .form_wrapper h4 {
        font-size: clamp(11px, 1.22vw, 23.4px);
    }
    h2 {
        font-size: clamp(15px, 1.6vw, 31px);
    }
    h3 {
	    font-size: clamp(14px, 1.47vw, 28px);
    }
    p {
	    margin: clamp(15px, 1.56vw, 30px) auto clamp(15px, 1.56vw, 30px) auto;
    }
    table.formTable td,table.formTable th {
	    width: auto;
	    display: table-cell;
        border: clamp(0.7px, 0.08vw, 1.5px) solid black;
	    padding: clamp(7px, 0.78vw, 15px);
    }
    table.formTable th{
	    width: clamp(210px, 23.5vw, 450px);
	    margin-top: clamp(3.5px, 0.39vw, 7.5px);
    }
    form input[type="submit"], form input[type="reset"], form input[type="button"] {
	    margin: auto;
    }
    span {
	    font-size: clamp(11px, 1.22vw, 23.4px);
    }
    p.error_messe{
        font-size: clamp(11px, 1.22vw, 23.4px);
	    margin: clamp(4px, 0.4vw, 8px) 0;
    }

    /* arcive.html */
    .arcive_content {
        padding: 0 clamp(22px, 2.5vw, 48px) 0 clamp(22px, 2.5vw, 48px);
    }
    .arcive_content span img {
        max-width: clamp(22px, 2.5vw, 48px);
        max-height: clamp(22px, 2.5vw, 48px);
    }
    .arcive_content a h3 {
        font-size: clamp(20px, 2.2vw, 42.2px);
    }
    .arcive_content ul li{
        padding-left: clamp(13.5px, 1.5vw, 28.8px);
    }
    .arcive_content ul li a h3{
        font-size: clamp(13.5px, 1.5vw, 28.8px);
    }
    
    /* 各主要記事のスタイル */
    .main_article {
        border-radius: 0.5vw;
        padding: 0 clamp(27px, 3vw 57.6px) clamp(13.5px, 1.5vw, 28.8px) clamp(27px, 3vw 57.6px);
    }
    .main_article h4 span span span img {
        width: clamp(11px, 1.22vw, 23.4px);
    }
    .main_article h2 {
        font-size: clamp(22px, 2.5vw, 48px);
    }
    .main_article h3 {
        font-size: clamp(15px, 1.7vw, 32.6px);
    }
    .main_article ul {
        padding: 0 clamp(11px, 1.22vw, 23.4px) 0 clamp(11px, 1.22vw, 23.4px);
    }
    .main_article li span {
        font-size: clamp(14.4px, 1.6vw, 30.7px);
        text-decoration: underline solid clamp(2.7px, 0.3vw, 5.7px) #f6a57a;
    }
    .main_article p {
        padding: 0 clamp(22px, 2.5vw, 48px) 0 clamp(22px, 2.5vw, 48px);
    }
    .main_article p span {
        font-size: clamp(14.4px, 1.6vw, 30.7px);
        text-decoration: underline solid clamp(2.7px, 0.3vw, 5.7px) #f6a57a;
    }
    .main_article .img_paste {
        padding: 0 clamp(22px, 2.5vw, 48px) 0 clamp(22px, 2.5vw, 48px);
    }
    .main_article .main_article_table_1 {
        border-bottom: clamp(0.4px, 0.05vw, 1px) solid black;
        margin: 0 clamp(22.5px, 2.5vw, 48px) 0 clamp(22.5px, 2.5vw, 48px);
    }
    .main_article .main_article_table_1 th,.main_article .main_article_table_1 td {
        width: clamp(180x, 20vw, 384px);
        font-size: clamp(13.5px, 1.5vw, 28.8px);
        border-top: clamp(0.4px, 0.05vw, 1px) solid black;
	    padding: clamp(3.5px, 0.39vw, 7.5px);
    }
    .main_article .main_article_table_1 th {
        border-left: clamp(0.4px, 0.05vw, 1px) solid black;
        border-right: clamp(0.4px, 0.05vw, 1px) solid black;
    }
    .main_article .main_article_table_1 td {
        border-right: clamp(0.4px, 0.05vw, 1px) solid black;
    }
    .main_article .main_article_table_2 {
        border-bottom: clamp(0.4px, 0.05vw, 1px) solid black;
        margin: 0 clamp(22.5px, 2.5vw, 48px) 0 clamp(22.5px, 2.5vw, 48px);
    }
    .main_article .main_article_table_2 th,.main_article .main_article_table_2 td {
        width: clamp(63x, 7vw, 134px);
        font-size: clamp(13.5px, 1.5vw, 28.8px);
        border-top: clamp(0.4px, 0.05vw, 1px) solid black;
	    padding: clamp(3.5px, 0.39vw, 7.5px);
    }
    .main_article .main_article_table_2 th {
        border-left: clamp(0.4px, 0.05vw, 1px) solid black;
        border-right: clamp(0.4px, 0.05vw, 1px) solid black;
    }
    .main_article .main_article_table_2 td {
        border-right: clamp(0.4px, 0.05vw, 1px) solid black;
    }
    .main_article .main_article_page_link ul {
        padding: 0 clamp(22px, 2.5vw, 48px) 0 clamp(22px, 2.5vw, 48px);
    }
    .main_article .main_article_page_link li {
        width: clamp(135px, 15vw, 288px);
        height: auto;
        border-radius: 0.5vw;
    }
    .main_article .main_article_page_link ul li a {
        padding-top: clamp(9px, 1vw, 19.2px);
        padding-bottom: clamp(px, 1vw, 19.2px);
    }
    .main_article .related_article_link {
        margin:  0 clamp(22px, 2.5vw, 48px) 0 clamp(22px, 2.5vw, 48px);
        border-radius: 0.5vw;
    }
    .main_article .related_article_link a {
        padding-top: clamp(9px, 1vw, 19.2px);
        padding-bottom: clamp(px, 1vw, 19.2px);
    }
    .main_article .recommend_item_link {
        margin: clamp(12.6px, 1.4vw, 26.9px) clamp(22px, 2.5vw, 48px) 0 clamp(22px, 2.5vw, 48px);
        border-radius: 0.5vw;
    }
    .main_article .recommend_item_link a {
        padding-top: clamp(9px, 1vw, 19.2px);
        padding-bottom: clamp(px, 1vw, 19.2px);
    }
    .main_article p span span span a {
        font-size: clamp(13.5px, 1.5vw, 29px);
        text-decoration: underline solid clamp(2.7px, 0.3vw, 5.7px) #5983b0;
    }
    .main_article .spot_text_link ul {
        display: flex;
        gap: clamp(12.6px, 1.4vw, 26.9px);
        justify-content: center;
    }
    .main_article .spot_text_link a {
        display: block;
        text-align: center;
        text-decoration: underline solid clamp(2.7px, 0.3vw, 5.7px) #5983b0;
    }
    /* 目次　新着記事位置を都度設定しましょう */
    .side_content_new_img {
        width: clamp(31.5px, 3.5vw, 67.2px);
        top: clamp(-278px, -14.5vw, -131px);
        left: clamp(-19.2px, -1vw, -9px);
    }
    .new_articles_new_img {
        width: clamp(12.6px, 1.4vw, 26.9px);
    }
}