html { height: 100%;}
body { box-sizing: border-box;margin: 0; padding: 0;background-image : url(img/back.jpg) ; }
@font-face { font-family: 'utsukushi';
    src: url('ipaexm.eot');
    src: url('ipaexm.eot?iefix') format('eot'),
         url('ipaexm.woff') format('woff'),
         url('ipaexm.ttf') format('truetype'),
         url('ipaexm.svg#webfontjSpbZQRv') format('svg');}

.PC { display: block;}
.SP { display: none;}
p { font-weight: 200; font-size: 15px; font-family: serif;}
li { display: inline-block; list-style: none;}
a { text-decoration: none; color: white; font-family: serif;}
a:hover { opacity: 0.5;}

.TOP { position: relative; margin: 0; width: 100%; padding: 3em 0; text-align: center; background-image: url(img/topback.jpg);background-size: cover;background-repeat: no-repeat;}
h1 { color: white; font-size: 1.95em; font-family: 'utsukushi'; letter-spacing: 2; font-weight: 300;}
.TOP img { margin-top: -1em;}

.box { margin: 0; margin-top: -1.5em; position: relative; max-width: 100%;/*背景の大きさに変更 */ height : 100vh; margin: 0; /*background: #5F1B0E;*/}
/* --- 背景が上下左右に動くの背景定義 ----------------------- */
/*.box::before { display: block; content : ""; position: fixed; top: 0; right : 0; bottom : 0; left : 0; background: url(img/back.jpg) center/cover; /* 使用する画像を指定 */ animation : bgAnime 15s linear infinite;}*/
@keyframes bgAnime {
   0% { background-position: 1080px 817px }    /* 使用する画像幅と画像高さのpxに変更ください */
 100% { background-position: -500px 332px }
}
.include { position: absolute; width: 85%; text-align: center; top: 6em; left: 50%; transform: translateX(-50%); -webkit- transform: translateX(-50%); padding-bottom: 37%;}
.prof{ background-color: rgba(83,0,0,0.49);}
.prof { color: white; padding: 1em 3em; margin: 3em auto;}
.prof h2 { color: white;}
h2 { color: #6E0D0D; font-size: 1.5em; font-family: 'utsukushi'; letter-spacing: 3; font-weight: 100; line-height: 1.35em;}
.include p { text-align: left;}
.prof small { color: #6E0D0D;}

.chekiwrap { height: auto;}
.ulcheki { margin: 0 auto; height: 10em; display: flex;flex-wrap: wrap;justify-content: space-around; padding-inline-start:0; position: relative;}
.cheki { width: 100%; height: auto;/* position: absolute; z-index: -5;*/}
.ulcheki li { width:  22%; max-width: 300px; min-width: 160px; text-align: center; position: relative;}
.ulcheki li img { width: 100%; min-width: 160px; position: relative; z-index: 5;}
.ulcheki li h2 { width: 83%; font-size: 1.15em; position: absolute; z-index: 10; bottom: calc(15% - 30px);
                 left: 50%; transform: translateX(-50%); -webkit- transform: translateX(-50%);}
.ulcheki small { color: white; font-size: 1.1em; font-family: 'utsukushi';}

.cube { width: 85%; margin: 0;display: flex; justify-content: space-around; position: absolute; padding-inline-start: 0; z-index: 10;
        left: 50%; transform: translateX(-50%); -webkit- transform: translateX(-50%);}
.cube li { width: 100%; /*background-color: brown;*/ line-height: 4em; text-align: center; min-width: 120px; font-family: 'utsukushi';}
.cube a { width: 23%; margin: 0 0.2%;}
.cube a:hover{ opacity: 0.8;}
.cube a:hover li{ background: black;}
.cube li.link1 { background: rgb(55,14,10);background: linear-gradient(120deg, rgba(55,14,10,1) 0%, rgba(225,52,64,1) 57%, rgba(255,232,31,1) 100%);}
.cube li.link2 { background: rgb(153,20,38);background: linear-gradient(165deg, rgba(153,20,38,1) 0%, rgba(123,18,72,1) 53%, rgba(77,23,97,1) 100%);}
.cube li.link3 { background: rgb(203,12,22);background: linear-gradient(151deg, rgba(203,12,22,1) 0%, rgba(243,130,0,1) 46%, rgba(255,233,0,1) 100%);}
.cube li.link4 { background: rgb(0,141,192);background: linear-gradient(151deg, rgba(0,141,192,1) 0%, rgba(253,219,81,1) 100%);}

.sukima { line-height: 1.8em; display: none;}
.side { width: 85%; display: flex; justify-content: space-between; margin: 0 auto;}

footer { width: 100%; position: fixed; bottom: 0; background: #5F1B0E; line-height: 2.1em; color: white; font-size: 11.5px; display: flex; justify-content: space-between;}
.fside { display: flex; justify-content: space-between; margin: 0 auto; width: calc(100% - 20px);}
footer small { display: inline-block;}
footer small.right { text-align: right;}



@media screen and (max-width:780px){
  .PC { display: none;}
  .SP { display: block;}

h1 { font-size: 1.58em;}
.TOP img { width: 84%;}

.include { top: 2em;}

.ulcheki li h2 { width: 88%; font-size: 1em;bottom: calc(18% - 30px);}
.ulcheki small { font-size: 1em;}
.cheki { height: 45em;}

.cube { flex-wrap: wrap; justify-content: space-around;}
.cube li {padding: 2%; margin: 2px auto; min-width: 50px;}
/*ドロップダウン*/
.cube { width: 100%;flex-wrap: wrap; justify-content: space-around;}
.cube a{overflow: hidden;height: 0; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; -ms-transition: .3s; transition: .3s;}
.Manu { width: 90%; line-height: 3em; text-align: center; margin: 10% auto 0 auto;
        background: rgb(55,14,10);background: linear-gradient(120deg, rgba(55,14,10,1) 0%, rgba(225,52,64,1) 57%, rgba(255,232,31,1) 100%);}
.Manu a { width: 100%; display: block;}
.Manu a:hover { background: black; opacity: 0.8;}
.Manu:hover .Manu.cube { bottom: -7.3em;}
.Manu:hover .cube li { line-height: 3em; padding: 0;}
.Manu:hover ul a { overflow: visible; height: 3em; width: 90%; border-bottom: 1px solid #000;}
.Manu:hover ul a:hover{ opacity: 0.8;}
.Manu:hover ul a:hover li{ background: black;}
.Manu:hover ul li:first-child{ border-top: 0;}
.Manu:hover ul li:last-child{ border-bottom: 0;}
/*ドロップダウン*/

.sukima { line-height: 3.2em;}
footer { display: block; text-align: center;line-height: 1.5em;}
.fside { display: block;}
footer small.right { text-align: center;}
}

@media screen and (max-width:380px){
.cheki { height: 78em;}
}