@charset "UTF-8"; .us-wrap { font-weight: 400; font-family: 'Noto Sans', sans-serif; word-break:normal; overflow-wrap: break-word; } .us-wrap p { margin: 0; padding: 0; } .us-wrap ul { list-style: none; margin: 0; padding: 0; } .us-wrap dl, .us-wrap dt, .us-wrap dd { margin: 0; padding: 0; } /* ============================================================================ ■ PC ============================================================================ */ @media screen and (min-width:769px) , print { .us-wrap { font-size: 16px; letter-spacing: 0.05em; } .us-brSp { display: none; } .us-phSp { display: none; } /* contentsArea common ---------------------------------------- */ .us-contentsArea .us-contentTtl01 { font-size: 38px; font-weight: 700; text-align: center; text-shadow: 1px 1px 0px #000000, -1px 1px 0px #000000, 1px -1px 0px #000000, -1px -1px 0px #000000, 1px 0px 0px #000000, 0px 1px 0px #000000, -1px 0px 0px #000000, 0px -1px 0px #000000, 3px 3px 0px #000000; color: #ffffff; margin: 0 0 60px 0; } .us-contentsArea .us-bgBlue { width: 100%; background: #cef3f8; overflow: hidden; } .us-contentsArea .us-contentInner { max-width: 1052px; margin: 75px auto 0; padding: 0 15px } /* us-contentMenu ---------------------------------------- */ .us-contentMenu { margin: 80px auto 0; } .us-menuPart { position: relative; display: inline-block; width: 310px; height: 210px; text-align: center; margin: 0 0 100px 22.5px; border: #ffffff 1px solid; } /*.us-menuPart:nth-child(3n) { margin: 0 0 100px; }*/ .us-menuPart01 { background-image:url(../img/menu_ph01.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; } .us-menuPart02 { background-image: url(../img/menu_ph02.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; } .us-menuPart03 { background-image: url(../img/menu_ph03.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; } .us-menuPart04 { background-image: url(../img/menu_ph04.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; } .us-menuPart05 { background-image: url(../img/menu_ph05.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; } .us-menuPartShadow { position: absolute; top: 0; left: 0; display: block; width: 310px; height: 210px; background: #000000; opacity:0.6; filter:alpha(opacity=60); -ms-filter:"alpha(opacity=60)"; transition: all 200ms; } .us-menuPartTtl { position: absolute; display: block; top: 55px; width: 310px; font-size: 28px; font-weight: 700; text-shadow: 1px 1px 0px #000000, -1px 1px 0px #000000, 1px -1px 0px #000000, -1px -1px 0px #000000, 1px 0px 0px #000000, 0px 1px 0px #000000, -1px 0px 0px #000000, 0px -1px 0px #000000, 2px 2px 0px #000000; color: #ffffff; } .us-menuPartTxt { position: absolute; display: block; top: 110px; width: 310px; color: #ffffff; line-height: 1.5; } .us-menuPart a:hover { opacity:1; filter:alpha(opacity=100); -ms-filter:"alpha(opacity=100)"; } .us-menuPart a:hover .us-menuPartShadow { opacity:0.3; filter:alpha(opacity=30); -ms-filter:"alpha(opacity=30)"; } .us-menuPart a:hover .us-menuPartTtl { opacity:1; filter:alpha(opacity=100); -ms-filter:"alpha(opacity=100)"; } .us-menuPart a:hover .us-menuPartTxt { opacity:1; filter:alpha(opacity=100); -ms-filter:"alpha(opacity=100)"; } } /* ============================================================================ ■ TABLET ============================================================================ */ @media screen and (min-width:769px) and (max-width:1052px){ .us-menuPartsArea{ width: 100%; } .us-menuPart{ width: 49%; margin: 0 auto 100px; } .us-menuPartShadow{ width: 100%; } .us-menuPartTtl{ width: 100%; } .us-menuPartTxt{ width: 100%; } } /* ============================================================================ ■ SP ============================================================================ */ @media screen and (max-width:768px){ .us-wrap { font-size: 14px; letter-spacing: 0.05em; } .us-brPc { display: none; } .us-phPc { display: none; } /* contentsArea common ---------------------------------------- */ .us-contentsArea .us-contentTtl01 { font-size: 23px; font-weight: 700; text-align: center; text-shadow: 1px 1px 0px #000000, -1px 1px 0px #000000, 1px -1px 0px #000000, -1px -1px 0px #000000, 1px 0px 0px #000000, 0px 1px 0px #000000, -1px 0px 0px #000000, 0px -1px 0px #000000, 2px 2px 0px #000000; color: #ffffff; margin: 0 0 30px 0; } .us-contentsArea .us-bgBlue { width: 100%; background: #cef3f8; overflow: hidden; } .us-contentsArea .us-contentInner { margin: 45px auto 0; padding: 0 15px; } /* us-contentMenu ---------------------------------------- */ .us-contentMenu { margin: 30px auto 0; } .us-menuPart { position: relative; display: inline-block; width: 100%; height: 155px; text-align: center; margin: 0 0 15px 0; border: #ffffff 1px solid; } .us-menuPart:last-child { margin: 0 0 45px 0; } .us-menuPart01 { background-image:url(../img/menu_ph01_sp.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; } .us-menuPart02 { background-image: url(../img/menu_ph02_sp.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; } .us-menuPart03 { background-image: url(../img/menu_ph03_sp.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; } .us-menuPart04 { background-image: url(../img/menu_ph04_sp.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; } .us-menuPart05 { background-image: url(../img/menu_ph05_sp.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; } .us-menuPartShadow { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 155px; background: #000000; opacity:0.6; filter:alpha(opacity=60); -ms-filter:"alpha(opacity=60)"; transition: all 200ms; } .us-menuPartTtl { position: absolute; display: block; top: 40px; width: 100%; font-size: 23px; font-weight: 700; text-shadow: 1px 1px 0px #000000, -1px 1px 0px #000000, 1px -1px 0px #000000, -1px -1px 0px #000000, 1px 0px 0px #000000, 0px 1px 0px #000000, -1px 0px 0px #000000, 0px -1px 0px #000000, 2px 2px 0px #000000; color: #ffffff; } .us-menuPartTxt { position: absolute; display: block; top: 85px; width: 100%; color: #ffffff; line-height: 1.5; letter-spacing: 0; } }