Newer
Older
web / css / sub.css
@YAMAGUCHI Madoka YAMAGUCHI Madoka on 2 May 2019 2 KB tr color change
/* 2019's terakotta css */

/* body */
body {
margin: 0;
padding: 0;
background-color: white;
}

h2 {
font-size:x-large;
    font-family: 'Hiragino Kaku Gothic ProN', Meiryo, Helvetica, Arial, sans-serif;
}


/* header */
header {
text-align: center;
margin: 0 auto;
}

header img{
width: 100%;
}


/* menu */

#menu table, tr, td {
border: 1px solid #fff; border-collapse: collapse
}

#menu table {
height: 70px;
text-align: center;
}

#menu table td{
margin: 5px;
}

#menu table tr td {
padding-left: 14px;
padding-right: 14px;
border-left: 3px dotted orange;
border-right: 3px dotted orange;
background-color: pink;
}




h2 {
font-size: x-large;
}

h3 {
font-size: large;
}

/* div.box-text */

img.img-left{
    padding: 3ex 0;
    float:left;
}

img.img-right{
    padding: 3ex 0;
    float:left;
}

div.box-text-left{
    background: #fff;
    border:dotted 5px green;
    border-radius: 3em 3em;
    margin:2em 1ex;
    padding: 2ex 1ex;
    float:left;
    width:380px;
}

div.box-text-right{
    background: #fff;
    border:dotted 5px pink;
    border-radius: 3em 3em;
    margin:2em 1ex;
    padding: 2ex 1ex;
    float:right;
    width:380px;
}

div.box-text-right-border-none{
    background: #fff;
    margin:1ex;
    padding: 2.2ex 1ex;
    float:right;
    width:400px;
}

div.text-left{
    float:left;
    width:700px;
}

div.text-right{
    float:right;
    width:700px;
}

a {
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
}

/* Q&A */
label:not(.label) {
    background: #FFF0F5;
    color: #000;
    padding: 10px;
    display: block;
    margin: 0;
    border: 1px solid #fff;
    cursor: pointer;
}

label:hover:not(.label) {
    background: #FF6699;
}

input[type="checkbox"].on-off{
    display: none;
}

input[type="checkbox"].on-off + section{
    display: none;
}

input[type="checkbox"].on-off:checked + section{
    display: block;
}

section.qa{
    padding:1ex;
}

/* Q&A print */
@media print{
    header{
        display: none;
    }

    nav{
        display: none;
    }

    footer{
        display: none;
    }

    .main_contents{
	background-color:#fff;
	margin:0;
	padding:5px;
	width:1000px;
	float:left;
    }
    .qa{
	padding:0;
    }
 label {
	background: #FFF0F5;
	color: #000;
	padding:0;
	display: block;
	margin: 0;
	border: 1px solid #fff;
	cursor: pointer;
    }

    input[type="checkbox"].on-off + section{
	display: block;
    }

    input[type="checkbox"].on-off:checked + section{
	display: block;
    }
}

a.link{
    display:block;
    text-decoration:none;
    color:#463a1c;
}




/* footer */

footer{
clear: both;
background-color: #372F2D;
position: relative;
bottom: 0;
margin: 0.5ex;
padding: 0.5ex;
font-size: small;
color: white;
text-align: center;
}

html {
height: 100%;
}

body {
height: 100%;
}

#menu {
height: 100%;
}