/*** for PC Browser ***/
@media (min-width:401px)
{
<!--/* CSS Document 　　メニュー画面用のスタイルシート部分です。（PCブラウザ用）*/-->

@charset "Shift_JIS";

<style type="text/css">  				
<!-- 	

/*--（1）全体のフォントファミリー、フォント色を設定---*/

@import url("https://fonts.googleapis.com/css?family=Lato%3A400%2C700%7CNoto+Sans+JP%3A400%2C700&#038;ver=5.3.2");

body {
   font-family:Lato, "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
   color: #1a1a1a;
}
 
/*--（2）メニュー画面の設定---*/

.contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 95%;
    text-align: center;
    margin: 30px 20px 30px 20px;
    padding-top: 10px;
}

.item {
    width: calc(90% / 2 - 30px);
    margin-bottom: 30px;
    padding: 10px 10px;
    font-size: 1.5em;
    text-align: center;
}

.resize {
    height: 100px; 
}


/*--(3) div要素全体にリンクをつけるために必要な要素を設定 --*/

.linkbox {
    position: relative;
    box-shadow: 1px 2px 15px 2px rgba(0, 0, 0, 0.3);
}
.linkbox a {
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
}

.linkbox-guide {
    position: relative;
    box-shadow: 1px 2px 15px 2px rgba(0, 0, 0, 0.3);
}

.linkbox-guide a {
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
}


/* --(4) divリンクへの彩色等設定 --*/

.linkbox {
    border-left: solid 15px #7f7fff;
    border-bottom: 2px dotted #7f7fff;
    border-radius: 0 0 0 0;
}

.linkbox-guide {
    border-left: solid 15px #ffdbc9;
    border-bottom: 2px dotted #ffdbc9;
    border-radius: 0 0 0 0;
}

/* --(5) マウスオーバー時に色変更 --*/

.linkbox a:hover{
    opacity: 0.2;
    background-color: #7f7fff;
    box-shadow: 1px 2px 15px 12px rgba(0, 0, 0, 0.3);
}

.linkbox-guide a:hover{
    opacity: 0.2;
    background-color: #ffdbc9;
    box-shadow: 1px 2px 15px 12px rgba(0, 0, 0, 0.3);
}


/*--（6）検索案内画面の設定---*/

.guide {
    width: calc ( ( 45% - 30px ) * 2 + 20px );
    margin: 30px 20px 30px 20px;
    padding: 10px 20px;
    font-size: 1.4em;
    text-align: center;
}

-->  				
</style>
}


/*** for Smart Phone ***/
@media (max-width:400px)
{
<!--/* CSS Document 　　メニュー画面用のスタイルシート部分です。（スマホ用）*/-->

@charset "Shift_JIS";

<style type="text/css">  				
<!-- 

/*--（1）全体のフォントファミリー、フォント色を設定---*/

@import url("https://fonts.googleapis.com/css?family=Lato%3A400%2C700%7CNoto+Sans+JP%3A400%2C700&#038;ver=5.3.2");

body {
   font-family:Lato, "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
   color: #1a1a1a;
}

/*--（2）メニュー画面の設定---*/

.contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 95%;
    text-align: center;
    margin: 30px 20px 30px 20px;
    padding-top: 30px;
}

.item {
    width: calc(90% / 2 - 30px);
    margin-bottom: 30px;
    padding: 30px 10px;
    height: 5em;
    font-size: 1.4em;
    text-align: center;
}

.resize {
    width: 50px; 
}


/*--(3) div要素全体にリンクをつけるために必要な要素を設定 --*/

.linkbox {
    position: relative;
    box-shadow: 1px 2px 15px 2px rgba(0, 0, 0, 0.3);
}
.linkbox a {
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
}

.linkbox-guide {
    position: relative;
    box-shadow: 1px 2px 15px 2px rgba(0, 0, 0, 0.3);
}

.linkbox-guide a {
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
}

/* --(4) divリンクへの彩色等設定 --*/

.linkbox {
    border-left: solid 15px #7f7fff;
    border-bottom: 2px dotted #7f7fff;
    border-radius: 0 0 0 0;
}

.linkbox-guide {
    border-left: solid 15px #ffdbc9;
    border-bottom: 2px dotted #ffdbc9;
    border-radius: 0 0 0 0;
}

/* --(5) マウスオーバー時に色変更--*/

.linkbox a:hover{
    opacity: 0.2;
    background-color: #7f7fff;
    box-shadow: 1px 2px 15px 12px rgba(0, 0, 0, 0.3);
}

.linkbox-guide a:hover{
    opacity: 0.2;
    background-color: #ffdbc9;
    box-shadow: 1px 2px 15px 12px rgba(0, 0, 0, 0.3);
}


/*--（6）検索案内画面の設定---*/

.guide {
    width: calc ( ( 45% - 30px ) * 2 + 20px );
    margin: 30px 20px 30px 20px;
    padding: 10px 20px;
    font-size: 1.4em;
    text-align: center;
}

-->  				
</style>
}