@charset "UTF-8";

body,div,ol,ul,dl,form {
	margin: 0px;
	padding: 0px;
}
p,h1,h2,h3,h4,h5,h6,dt,dd,input,textarea {
	margin: 0px;
	padding: 0px;
	font-size: 100%;
}
a:link {
	color: #333333;
}
a:visited {
	color: #cc0000;
}
a:hover {
	color: #00cccc;
}
a {
	outline: none;
}
em {
	font-style: normal;
	font-weight: bold;
}
hr {
	height: 0px;
	visibility: hidden;
	clear: both;
	margin: 0;
	border: none;
}
img {
	border: none;
}

/* ページ全体の基本レイアウト
---------------------------------------------------- */


body {
	margin: 0;
  	padding: 0;
  	font: small "MS Pゴシック",OSAKA,sans-serif;
  	color: #333333;
}
@media screen and (max-width:767pxpx) {

	body {
             max-width: 1000px;
             width: auto;
        }

}

#container {
	margin: 0 auto;
	padding: 0;
	width: 100%;
}

/* header
---------------------------------------------------- */
#header {
	margin: 0px auto 0px auto;
	width: 100%;
	height: 1020px;
        border: solid 1px #8eb8ff; 
        background-color: #8eb8ff;
        background-image: url("https://oshigoto-setsumeikai.try-group.jp/image/sky.jpg");
        background-size: cover;
}
@media screen and (max-width:767px) {

	#header {
             height: 100%;
        }

}

#header #headtitle {
        width: 80%;
        height: 400px;
        margin: 50px auto 0px auto;
        background-color: rgba(0,0,153,0.3);
        border: solid 1px rgba(0,0,153,0.3);
}
@media screen and (max-width:767px) {

	#header #headtitle {
             height: 120px;
              width: 90%;
        }

}

#header #headtitle #headyear {
        width: 200px;
        height: 100px;
        margin: 30px 0px 0px 20px;
        border-radius: 50%;
        background-color: #ffffff;
        text-align: center;
        line-height: 100px;
        font-size: 4.5vw;
        color: #336699;
        font-family: serif;
}
@media screen and (max-width:767px) {

	#header #headtitle #headyear {
             width: 80px;
             height: 40px;
             margin: 1% 0% 0% 1%;
             line-height: 170%;
             font-size: 6vw;
        }

}

#header h1 {
	margin: 0px;
	text-align: center;
	font-weight: bold;
        font-family: sans-serif;
        font-size: 7vw;
        color: #ffffff;
        text-shadow: 2px 2px 5px #000000;
}
@media screen and (max-width:767px) {

	#header h1 {
             font-size: 8vw;
        }

}

#header h2 {
	margin: 0px 0px 0px auto;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background-color: #ff99ff;
        border: solid 1px #ff99ff;
	text-align: center;
        line-height: 100px;
	font-weight: bold;
        font-family: sans-serif;
        font-size: 6vw;
        color: #006633;
        text-shadow: 2px 2px 5px #ffffff;
        z-index:1000;
        position:relative;
}
@media screen and (max-width:767px) {

	#header h2 {
             width: 150px;
             height: 150px;
             line-height: 40px;
             font-size: 8vw;
        }

}

#header h2 span {
        font-size: 2em;
}

#headcontent {
        width: 100%;
        height: 420px;
        margin: 150px auto 0px auto;
        background-color: #99ff33;
        z-index:100;
	border: solid 1px #99ff33
}
@media screen and (max-width:767px) {

	#headcontent {
             margin: 90px auto 0px auto;
             height: 100%;
             padding-bottom: 10px;
        }

}

#headcontent p {
	font-size: 6vw;
	color: #ffffff;
	padding-top: 150px;
	text-align: center;
	font-family: serif;
	background-image: url("https://oshigoto-setsumeikai.try-group.jp/image/headcontimg.png");
	background-repeat: no-repeat;
	background-position: center;
	text-shadow: 3px 3px 6px #000000;
}
@media screen and (max-width:480px) {

	#headcontent p {
             font-size: 9vw;
             background-size: contain;
             padding-top: 50px;
        }

}

/* content
---------------------------------------------------- */
#content {
	width: 100%;
}

#contenta {
        height: 500px;
        width: 70%;
        margin: 10px auto;
        background-image: url("https://oshigoto-setsumeikai.try-group.jp/image/shiga.png");
        background-size: 500px 375px;
        background-repeat: no-repeat;
        background-position: 90% 50%;
}
@media screen and (max-width:480px) {

	#contenta {
             width: 90%;
             height: 100%;
             background-size: 80%;
             background-position: 130% 10%;
        }

}

#contenta p {
        font-size: 1.5em;
        font-family: sans-serif;
        width: 70%;
        padding-top: 30px;
        padding-left: 40px;
}
@media screen and (max-width:480px) {

	#contenta p {
             width: 100%;
             padding-left: 0;
        }

}

#contenta h3 {
        font-size: 2.5em;
        font-family: sans-serif;
        margin: 50px 0px 30px 70px;
        display: inline-block;
        padding: 10px;
        background-color: #99ff33;
}
@media screen and (max-width:480px) {

	#contenta h3 {
             margin: 40px 0px 10px 0px;
             font-size: 2em;
        }

}

#contenta ul {
        font-size: 1.7em;
        margin-left: 100px;
        
}
@media screen and (max-width:480px) {

	#contenta ul {
             margin: 10px 0px 0px 30px;
             font-size: 1.4em;
        }

}

#contenta ul li {
         text-decoration: underline;
         text-decoration-thickness: 0.5em;
         text-decoration-color: rgba(255,153,255,0.4);
         text-underline-offset: -0.2em;
         text-decoration-skip-ink: none;
}

#contentb {
        height: 500px;
        width: 70%;
        margin: 10px auto;
        background-image: url("https://oshigoto-setsumeikai.try-group.jp/image/annai.jpg");
        background-size: 599px 400px;
        background-repeat: no-repeat;
        background-position: 25% 20%;
}
@media screen and (max-width:480px) {

	#contentb {
             width: 90%;
             height: 100%;
             background-size: 80%;
             background-position: 15% 60%;
        }
}

#contentb h3 {
        font-size: 2.5em;
        font-family: sans-serif;
        margin: 4.5% 0% 4% 47%;
        display: inline-block;
        padding: 10px;
        background-color: #99ff33;
}
@media screen and (max-width:480px) {

	#contentb h3 {
             margin: 40px 0px 10px 0px;
             font-size: 2em;
        }

}

#contentb ul {
        font-size: 2em;
        margin-left: 52%;
        list-style: none;
        display: inline-block;
        text-align: center
        
}

#contentb ul li {
         background-color: rgba(255,153,255,0.4);
         margin-bottom: 20px;
         padding: 5px 10px;
         border-radius: 10px;
}

#contentc {
        height: 380px;
        width: 60%;
        margin: 10px auto;
        background-color: #8eb8ff;
        border-radius: 30px;
        box-shadow: 10px 5px 5px #0000ff;
}
@media screen and (max-width:480px) {

	#contentc {
             width: 90%;
             height: 100%;
        }

}

#contentc h3 {
        font-size: 2.5em;
        font-family: sans-serif;
        margin: 30px 0px 20px 50px;
        display: inline-block;
        color: #ffffff;
        border-radius: 50%;
        background-color: #ff99ff;
        padding: 20px;
        text-shadow: 10px 5px 5px #999999;
}
@media screen and (max-width:480px) {

	#contentc h3 {
             margin: 30px 0px 20px 20px;
        }

}

#contentcmaina {
        float: left;
        width: 40%;
        border-right: dotted 3px #333333;
        padding: 10px 20px 40px 40px;
}
@media screen and (max-width:480px) {

	#contentcmaina {
             float: none;
             border-right: none;
             width: 90%;
             border-bottom: dotted 3px #333333;
             padding: 10px;
             margin-left: 10px;
        }

}

#contentcmainb {
        float: left;
        width: 43%;
        padding: 10px 20px 40px 40px;
}
@media screen and (max-width:480px) {

	#contentcmainb {
             float: none;
             border-right: none;
             width: 90%;
             padding: 10px;
             margin-left: 10px;
             margin-bottom: 15px;
        }

}

#contentc dl dt {
        font-size: 2em;
	 text-decoration: underline;
         text-decoration-thickness: 0.5em;
         text-decoration-color: rgba(255,153,255,0.7);
         text-underline-offset: -0.2em;
         text-decoration-skip-ink: none;
}

#contentc dl dd {
	font-size: 1.5em;
	padding-top: 10px;
	padding-left: 15px;
	width: 80%;
}
@media screen and (max-width:480px) {

	#contentc dl dd {
             width: 100%;
        }

}

#contentd {
	margin-top: 40px;
	width: 100%;
	background-color: #22948a;
	border: solid 1px #22948a;
}

#contentdmain {
	width: 60%;
	margin: 30px auto;
}
@media screen and (max-width:480px) {

	#contentdmain {
             width: 90%;
        }

}

#contentdmain h3 {
	font-size: 1.7em;
	border: solid 1px #ffffff;
	color: #ffffff;
        display: inline-block;
        padding: 8px 15px;
        font-weight: normal;
}

#contentdmain p {
        color: #ffffff;
        margin-left: 15%;
}
#contentdmain p .y {
        font-size: 2.3em;
}

#contentdmain p .m {
        font-size: 7em;
        font-weight: bold;
}
#contentdmain p .d {
        font-size: 13em;
        font-weight: bold;
        transform: scale(0.8,1);
        display: inline-block;
        margin-left: -5%;
        margin-bottom: -50%;
}
@media screen and (max-width:480px) {

	#contentdmain p .d {
             font-size: 10em;
             margin-top: -18%;
        }

}
#contentdmain p .w {
        font-size: 2.5em;
        margin-left: -5%;
}
#contentdmain p .t {
        font-size: 2.8em;
        display: inline-block;
        padding-top: -20%;
        text-align: right;
}

#contentemain {
	width: 60%;
	margin: 30px auto;
}
@media screen and (max-width:480px) {

	#contentemain {
             width: 90%;
        }

}

#contentemain h3 {
	font-size: 1.7em;
	border: solid 1px #ffffff;
	color: #ffffff;
        display: inline-block;
        padding: 8px 15px;
        font-weight: normal;
}
#contentemain p {
        color: #ffffff;
        font-size: 2em;
}
#contentemain p .meisyou {
        font-size: 2em;
        font-weight: bold;
}
#contentemain .iframe-wrp {
        position: relative;
        width: 100%;
        padding-top: 65%; /* = height ÷ width × 100 */
}
#contentemain .iframe-wrp iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}

#contentfmain {
	width: 60%;
	margin: 30px auto;
}
@media screen and (max-width:480px) {

	#contentfmain {
             width: 90%;
        }

}

#contentfmain h3 {
	font-size: 1.7em;
	border: solid 1px #ffffff;
	color: #ffffff;
        display: inline-block;
        padding: 8px 15px;
        font-weight: normal;
}
#contentfmain p {
        color: #ffffff;
        border: solid 1px #ffffff;
        font-size: 1em;
        padding: 0.1% 0.4%;
        display: inline-block;
        margin-left: 5%;
}
#contentfmain ul {
        list-style: none;
        color: #ffffff;
        font-size: 2em;
        margin: 2% 0% 0% 10%;
}
@media screen and (max-width:480px) {

	#contentfmain ul {
             font-size: 1.7em;
        }

}

/* footer
---------------------------------------------------- */
#footer {
	width: 70%;
        margin: 20px auto;
	padding-top: 0;
	background-color: #ffffff;
        color: #22948a;
}
@media screen and (max-width:480px) {

	#footer {
             width: 90%;
        }

}

#footer a,
#footer address {
        text-decoration: none;
        font-style: normal;
        color: #22948a;
}

#footer a:hover {
        text-decoration: underline;
        font-style: italic;
        color: #ff0000;
}

#footerfaq {
        margin-left: 40%
}
@media screen and (max-width:480px) {

	#footerfaq {
             margin: 0px;
        }

}
#footer dt {
        float: left;
        font-size: 1.5em;
}
#footer #ffaqlist {
        float: left;
        margin-left: 5%;
        font-size: 1.3em;
}
#footer dd address {
        margin-top: -10%;
}

#footermain {
        margin: 10px auto;
        font-size: 1.3em;
        width: 70%;
        text-align: center;
}