body { background-color:#ffffff; margin:0; padding:0; max-width:100%; } header { background-color:#dadada; position: fixed; width:100%; z-index:50; } header ul{ float:right; margin:0; padding-left:0; } header li{ display:inline-block; } header li a{ display: flex; align-items: center; font-weight: bold; color: #2b3a62; height:50px; font-size:15px; padding:0 20px; } header h3 { margin:10px 20px; display:inline-block; color:#414141; } ul{ list-style-type: none; padding-left: 0; } .main{ padding-top:40px; max-width: 100%; overflow-x: hidden; } /* .member-box{ background-color:#DDDDDD; width:100%; padding:5px 0 80px 0; margin:0; } .mem { text-align:center; font-size:30px; margin:10px 0; } .member { width:98%; margin: auto; } .member li{ width:18%; float: left; margin:0 1%; } .member p{ text-indent:0; text-align:center; font-weight:bold; font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "MS Pゴシック", "MS PGothic", sans-serif; } .name{ background-color:#33CCCC; margin:0 auto; padding:5px 5px; } .course{ background-color:#33FFCC; margin:0 auto; padding:5px 5px; } */ .conteiner{ height:800px; } .photo{ position:relative; width:60%; } .photo1{ padding: 50px 0 50px 40%; } .photo2{ padding: 50px 40% 50px 0; } img { z-index:-10; width: 100%; height: auto; } .top img{ width: 100%; height: 500px; object-fit: cover; font-family: 'object-fit: contain;' } .fadeIn_right { opacity: 0; transform: translate(50%, 0); } .fadeIn_left { opacity: 0; transform: translate(-50%, 0); } .is-show { transform: translate(0, 0); opacity: 1; transition: 2s; } .photo h1{ top:90px; padding:0 15px; } .title1{ position: absolute; left: 5%; } .title2{ position: absolute; right: 5%; } .box{ width:26em; position: absolute; top: 150px; } .box1{ left: 5%; } .box2{ right: 5%; } .box1 .syokai_box{ border-radius: 5px 15px 5px 15px; } .box2 .syokai_box{ border-radius: 15px 5px 15px 5px; } .syokai_box{ background-color:#EDFFFF; width:100%; } .syokai_box h2{ padding:15px 15px 0 15px; color:#414141; } .syokai_box p{ padding:15px 15px 15px 15px; color:#414141; } .sub .syokai_box{ background-color:#FF6928; } .sub .syokai_box h2{ color:#ffffff; } .sub .syokai_box p{ color:#ffffff; } .link_box{ margin-top:10px; height:3em; width:100%; display:inline-block; } .link_box a{ height:100%; display: flex; position:relative; background-color:#FF6928; } .box1 .link_box a{ border-radius: 15px 5px 15px 5px; } .box2 .link_box a{ border-radius: 5px 15px 5px 15px; } .link_box a p{ margin:auto; top:50%; color:#ffffff; text-decoration:none; } .gaiyo_box{ width:100%; margin:0; padding:0; background-color:#EDFFFF; padding:1em 0; } .gaiyo_box h1{ text-align:center; } .gaiyo_box h2{ color:#FF6928; margin-bottom:10px; } .gaiyo_box p{ text-indent:0; } .border-radius-1{ background-color: #ffffff; border-radius: 10px 30px 10px 30px; padding:1em 1em; margin:30px 5%; } h1 { font-size: 50px; z-index:5; font-family:"ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E"; color:#414141; margin:0; padding:0; } h2 { font-size: 22px; color: #414141; margin:0; padding:0; font-family: 'Kosugi', sans-serif; } p { font-size: 18px; color: #000000; margin:0px; font-family: 'Kosugi', sans-serif; } a{ text-decoration:none; } address { text-align: right; } .main a:link { } .main a:visited { color: #000080; } a:hover { background-color: #008080; } a:active { color: #0000ff; } .hoge {color:#ffccff} p.piyo {color:#ffccff} .imgs{ text-align:center; } .text { width:90%; margin:0 auto; } .calender { margin-top:50px; } table { font-size:20px; width:90%; margin:0 auto; text-align:center; border:2px solid red; } th{ width:12%; height:80px; } footer{ background-color:#414141; height:2em; display: table; width: 100%; } footer p{ display: table-cell; vertical-align: middle; text-align: center; color:#ffffff; font-size:14px; } @media screen and (min-width: 960px){ } @media screen and (max-width:959px){ /*タブレット用*/ header img{ display: inline-block; text-align: left; margin-left:0; } .member-box{padding-bottom:100px;} .top img{ height: 350px; } .box{ width:20em; } } @media screen and (max-width:767px){ /*スマホ用*/ header img{ display: inline-block; text-align: left; margin-left:0; } .member-box{padding-bottom:100px;} h1{ font-size:35px; } h2{ font-size:16px; } .photo h1{ padding:0 10px; } .photo{ width:70%; } .top .photo{ padding-bottom:100px; } .photo1{ padding: 20px 0 50px 30%; } .photo2{ padding: 20px 30% 50px 0; } .top img{ height: 250px; } .syokai_box h2{ padding:10px 10px 0 10px; } .syokai_box p { font-size: 14px; padding:10px 10px 10px 10px; } .link_box { height:2em; } .link_box a p{ font-size:14px; } .photo h1{ top:135px; } .box{ top:180px; width:12em; } .gaiyo_box p{ font-size:14px; margin-top:5px; } footer{ height:1.5em; } footer p{ font-size:10px; } } @media print{ h1{ color:black; background:none; border-color:black; } h2{ color:black; } }